DEV Community


Discussion on: Build a JavaScript and Tailwind CSS Theme Switcher

brandymedia profile image
Andy Griffiths Author

Couple if things that it might be worth checking...

Does you Tailwind compiled CSS contain the dark: variant? This needs to be imported in the tailwind.config.js file by enabling darkMode with 'class'. Your CSS would then need recompiling.

Is your script working, which adds the 'dark' class to the websites html tag. Open up dev tools in your browser and look for the 'dark' class when you've selected dark in the theme switcher.

It may sound obvious but are you adding both a light and dark class to an element, so for example... bg-white dark:bg-gray-800

I don't use components on Vercel so it may be that there is something specific to your set up.