Sujal
icon

How to Fix Dark Classes Not Applying in Tailwind CSS v4

Struggling with dark mode in Tailwind CSS v4? Learn how to fix the issue of dark classes not applying by using the new @custom-variant method in your global CSS file. Simple steps to implement dark mode effectively.

thumbnail image
1 min
Posted by :Sujal
Published on
Updated on

Introduction:

Are you facing issues with dark classes not applying in Tailwind CSS v4? You’re not alone. In this post, I’ll show you how to fix this issue after the recent changes in Tailwind CSS, where the darkMode setting in tailwind.config.js was removed. Let’s walk through a simple and effective solution to restore dark mode functionality.

Why Aren’t Dark Classes Working in Tailwind CSS v4?

In Tailwind CSS v4, the darkMode setting that was previously configured in the tailwind.config.js file has been removed. In earlier versions, you could enable dark mode with:

JavaScript
Copy
/** @type {import('tailwindcss').Config} */
module.exports = {
   darkMode: "class", // Enable dark mode using the 'class' strategy
}

However, Tailwind CSS v4 has introduced changes where dark mode needs to be handled directly in the global CSS file.

Solution: Enabling Dark Mode in Tailwind CSS v4

If you are toggling dark mode manually in your application, you’ll need to add the following code to your global CSS file to ensure that the dark classes are applied correctly.

  1. 1.
    Add the Custom Variant for Dark Mode:

    Open your global CSS file (usually styles/globals.css) and add this line at the top of the file:

    CSS
    Copy
    @import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
  2. 2.
    How It Works: This custom variant detects when the .dark class is applied to an element and triggers the correct dark mode styles accordingly.

By adding this to your CSS, you ensure that Tailwind CSS applies dark mode styles when the .dark class is present in your HTML or body tag.

Conclusion:

Tailwind CSS v4’s update has removed the previous configuration for dark mode, but this new method with the @custom-variant ensures dark mode can still be applied smoothly. By including the custom variant in your global CSS, you can regain full control over dark mode styling in your app.

🔗 Related Blogs

Want to add a perfect dark mode toggle in your Next.js app with "next-themes"

Check this blog ⬇️

Tailwind CSS V4 changes

Check out this blogs ⬇️

⚙️ See Handy Tools