TailwindCSS recently released a major updated to version 4. One of the main changes is that it no longer uses a tailwind.config.js file, and instead all the configuration is managed through a single CSS file: TailwindCSS upgrade guide. Most of the time, the new configuration method is pretty straight forward. However, there’s something I’ve been unable to do so far.
I usually want to completely disable dark mode. For this reason, I used to do this in the past in my configuration file:
module.exports = {
darkMode: false, // Disable dark mode
theme: {
extend: {},
},
plugins: [],
}These would completely ignore any dark: classes when compiling. According to the official documentation, dark mode now works using the CSS prefers-color-scheme media feature but there’s no specific guidance in how to disable it.
I did find a sample to override the default functionality using this line in the new CSS configuration file: @custom-variant dark (&:where(.dark, .dark *));. Then, if I don’t add the class dark up in the DOM tree, dark mode disabled but this feels like a clunky solution. When compiling the CSS file, all classes and styles for dark mode are still there, whereas my previous solution with the JavaScript configuration file omitted those.
What’s the proper way to set up the new CSS configuration file to completely disable dark mode? I know that the logical solution would be to just remove any dark: classes, but I choose to work like this because I use some third part components and plugins that always force dark mode based on system preferences. Hence, my main website has no dark mode but the specific components do render in dark mode making it less visually pleasing. I appreciate any guidance.
Tailwind CSS’ official playground could be used for testing. I’ve trying to use the following code for something simple:
<div class="bg-red-400 dark:bg-green-400 h-screen w-screen">
</div>It’s possible to review the generated CSS in the bottom left tab. Any code like this shouldn’t be compiled with the appropriate configuration file:
.dark:bg-green-400 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-green-400);
}
}
