Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/setup tailwind.config.js #81

Merged
merged 11 commits into from
Jan 7, 2025
Merged

Feature/setup tailwind.config.js #81

merged 11 commits into from
Jan 7, 2025

Conversation

Rucha-Ambaliya
Copy link
Contributor

@Rucha-Ambaliya Rucha-Ambaliya commented Jan 7, 2025 •
edited
Loading

Fixes Issue🛠️

Fulfills this need

Description👨‍💻

This PR introduces customizations to the tailwind.config.js file, including:

  1. Dark Mode configuration
  2. Custom Colors imported from a separate colors.js file
  3. Custom Screens to allow more flexible and project-specific responsiveness

1. darkMode:

Tailwind’s darkMode configuration is set to "class", enabling manual control over dark mode through class management.

How it saves time:

  • By adding the dark class to any element (typically the <html> or <body> tag), you enable dark mode across the site.
  • When dark mode is enabled, Tailwind will automatically switch the colors defined with the dark: prefix to their dark mode equivalents, eliminating the need to write ternary conditions everywhere.
  • By using dark:bg-black, dark:text-white, etc., you don't need to conditionally check if dark mode is enabled. Tailwind automatically applies the dark styles when the dark class is added to the root element, ensuring a clean and maintainable approach.

Example:

// Enabling dark mode in React (or any JavaScript framework)
document.documentElement.classList.add("dark"); // Adds dark mode class
// Or to toggle:
document.documentElement.classList.toggle("dark");

Tailwind Example:

<div className="bg-white dark:bg-black text-black dark:text-white">
  This element’s background and text color will change based on dark mode.
</div>

2. Colors:

For better organization and maintainability, all color definitions are stored in a separate colors.js file within the frontend folder. These colors are imported into tailwind.config.js.

Example:
// Example of using custom colors from colors.js
<div className="bg-blue-1 text-white">
  This div has a custom blue background from our color palette.
</div>

Screenshot 2025-01-07 103839

3. Screens:

Custom screen sizes have been added to the Tailwind config for greater flexibility. New sizes like xxs, xs, sm, md, lg, xl, 2xl, and 3xl have been added. These custom sizes align with SCSS media query breakpoints to ensure responsive behavior across different devices.

How it works:
  • You can now use the custom screen sizes in your Tailwind classes to handle responsiveness in easier way.
Example in JSX:
<div className="text-lg sm:text-base md:text-xl lg:text-2xl">
  The text size adjusts according to the screen size.
</div>

Type of Change📄

  • New feature (non-breaking change which adds functionality)
  • Style (non-breaking change which improves website style or formatting)
  • Responsiveness (non-breaking change which improves UI/UX on different screen sizes)

Checklist✅

  • I am an Open Source contributor
  • I have performed a self-review of my code
  • My code follows the style guidelines of this project

@vercel Vercel
Copy link

vercel bot commented Jan 7, 2025

@Rucha-Ambaliya is attempting to deploy a commit to the Pratik0112's projects Team on Vercel.

A member of the Team first needs to authorize it.

@PratikMane0112 PratikMane0112 merged commit 8eef3f3 into PratikMane0112:master Jan 7, 2025
1 check failed
@PratikMane0112
Copy link
Owner

Hey @Rucha-Ambaliya , pretty good !! please now look over the issue #64

@vercel Vercel
Copy link

vercel bot commented Jan 7, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
telmedsphere-server ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 7, 2025 11:08am

@PratikMane0112 PratikMane0112 mentioned this pull request Jan 7, 2025
Closed
@Rucha-Ambaliya
Copy link
Contributor Author

Yes! That is my next target now!

@Rucha-Ambaliya Rucha-Ambaliya deleted the feature/setup-tailwind.config.js branch January 8, 2025 08:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@Rucha-Ambaliya Rucha-Ambaliya

Labels
Advance ✌️points assigned SWOC
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@Rucha-Ambaliya @PratikMane0112