Resolved:Some Components Not Responding to Tailwind Classes After Tailwind’s Dark Mode Strategy Update (v3.4.1)
In my recent article, I discussed how I resolved the issue of dark mode not being applied to scrollbars. This was achieved by updating the class strategy to the selector strategy in the tailwind.config.js file due to an upgrade to Tailwind CSS v3.4.1.
However, this change led to new issues in my project. Before the change, the toaster component was working smoothly, but after the update, it stopped applying dark mode styles. The toaster component is a third-party library called react-hot-toaster. Even though I checked all settings and configurations, I couldn't identify any apparent issues. Therefore, I began investigating what Tailwind Dark Mode is, how it works, and what changes were made in this recent update to find a solution to the problem.
"use client";
import { Toaster } from "react-hot-toast";
const ToastWrapper = () => (
<Toaster
position="top-center"
toastOptions={{
duration: 1500,
className:
"bg-neutral-200 dark:bg-neutral-800 text-xs text-neutral-900 dark:text-neutral-50 border border-neutral-200/10",
style: {
padding: "5px 10px",
},
success: {
iconTheme: {
primary: "rgb(192,132,252)",
secondary: "white",
},
},
error: {
iconTheme: {
primary: "rgb(244,63,94)",
secondary: "white",
},
},
}}
/>
);
export default ToastWrapper;Understanding Dark Mode Settings
Default Settings
Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled.By default this uses the prefers-color-scheme CSS media feature.The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes. A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.
Toggling dark mode manually
If you want to support toggling dark mode manually instead of relying on the operating system preference, use the selector strategy instead of the media strategy.Now instead of dark:{class} classes being applied based on prefers-color-scheme, they will be applied whenever the dark class is present earlier in the HTML tree.
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'selector',
// ...
}<!-- Dark mode not enabled -->
<html>
<body>
<!-- Will be white -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
<!-- Dark mode enabled -->
<html class="dark">
<body>
<!-- Will be black -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>What changed for dark mode configurations after the upgrade?
“When we release v3.4 we changed darkMode: "class" to use :where and changed the sort order so it does not have a higher specificity. This also makes it act the same as darkMode: "media"(…)”
“Reduce specificity of rtl, ltr, and dark variants (when using darkMode: 'class') to make them the same as other variants.(…)”
According to these quotes from developers of Tailwindcss, the change in dark mode strategy actually resulted in lowering the specificity level. This meant that especially when used with third-party modules having CSS styles with high specificity, our Tailwind definitions would be overridden. As expected, this turned out to be the case.
By adding ! mark for the !important declarations in the toaster class for tailwind styling, I was able to resolve the issue. After these adjustments, the toaster started working smoothly again.
"use client";
import { Toaster } from "react-hot-toast";
const ToastWrapper = () => (
<Toaster
position="top-center"
toastOptions={{
duration: 1500,
className:
"!bg-neutral-200 dark:!bg-neutral-800 text-xs !text-neutral-900 dark:!text-neutral-50 border !border-neutral-200/10",
style: {
padding: "5px 10px",
},
success: {
iconTheme: {
primary: "rgb(192,132,252)",
secondary: "white",
},
},
error: {
iconTheme: {
primary: "rgb(244,63,94)",
secondary: "white",
},
},
}}
/>
);
export default ToastWrapper;
If you’re experiencing this kind of strange issues after the update, it’s a good idea to suspect and check for specificity problems
