Effortless Theming in Tailwind CSS

Hey friends,

Today, I want to share a simple way to handle themes in your web application using Tailwind CSS. Specifically, we'll look at how to switch themes and apply styles efficiently without having to modify every single class manually.

If you’ve worked on apps with Tailwind, you’ve probably used the dark variant for theming. Something like this:

<p className="text-red-400 dark:text-red-500">...</p>

While this works, it can get repetitive and tedious since you need to update every element individually. Instead, I’ll show you a better approach using CSS variables. This way, you only need to set the variables, and you’re good to go.

Setting Up Light and Dark Themes

For this example, let’s assume we want two themes: light and dark. Here’s how you can define them in your global.css:

:root {  
	--primary-color: #3498db;
	--secondary-color: #2ecc71;
} 
.dark {
  --primary-color: #2c3e50;  
  --secondary-color: #8e44ad; 
}

This defines your primary and secondary colors for both themes. You can extend this with as many variables and themes as you need.

Configuring Tailwind

Next, update your Tailwind configuration file (tailwind.config.ts) to make these variables available in your Tailwind classes:

darkMode: "class", 
theme: {  
	extend: {    
		colors: {      
		primary: "var(--primary-color)",      
		secondary: "var(--secondary-color)",    
		},  
	}, 
},

With this setup:

Dark mode is activated by adding the dark class to your <html> or <body> tag.
The variables defined in global.css are now accessible as Tailwind colors.

Using the Colors

Now, instead of manually writing dark: variants everywhere, you can simply use your defined colors like this:

<p className="text-primary">This text uses the primary color.</p> <p className="text-secondary">This one uses the secondary color.</p>

Tailwind will take care of applying the correct styles based on the active theme.

Bonus Tip

For even more convenience, you can use these variables directly in your CSS for default styles. For instance:

p {  color: var(--primary-color); }

This way, all <p> tags will inherit the primary color by default, and if you need to override it in specific cases, you can still use Tailwind classes.

And that’s it! This approach not only saves you time but also keeps your code clean and maintainable. Give it a try, and let me know how it works for you! 🚀

BAHADOR

CODES