TailwindCSS and Next Themes

[danilo-leal]

Hey guys!

I've just set up my project again for enabling dark mode with Next Themes. This is incredibly easy using Tailwind's Dark Mode since it's basically adding the class dark to stuff. But what got me thinking is that with Next Themes I have the opportunity of having more than just light and dark mode, see more here. How can I enable this with Tailwind? Any idea?

[simonswiss]

Hey!

This is currently not possible to support more than the dark theme variant, but if you're curious about how it's implemented, you can have a look at the dark variant in the source code:

Note that this variant generates an incredibly large amount of utilities, and adding more "theme" variants would do just the same to another level.

You're probably better off using CSS custom properties (CSS variables) to define your colours in the config file, and then redefine these colors within a parent class scope, as in this example:

https://github.com/adamwathan/theming-tailwind-demo

You can then use Next Themes to apply that class name to a container element to trigger color changes 👍