phplaraveltailwind-cssdarkmodetailwind-css-4

How activate darkMode with TailwindCSS in Laravel 12


How add darkMode: class in tailwind.config.js, it is missing in Laravel 12.


Solution

  • This is not handled by Laravel; it is part of TailwindCSS. The configuration you provided works up to TailwindCSS v3.

    Starting from v4, the tailwind.config.js file and the legacy JavaScript-based configuration are removed, although it is still possible to use them via the @config directive.

    In v4, dark mode is enabled by default but is activated based on the browser's prefers-color-scheme setting. It can be overridden manually, allowing you to control dark mode activation using the .dark class, for example. To achieve this, you need to override the behavior of the dark directive using @custom-variant a CSS-first configuration like this:

    @import "tailwindcss";
    
    @custom-variant dark (&:where(.dark, .dark *));
    

    Related questions:

    Based on the details in your question and the fact that Laravel 12 defaults to supporting TailwindCSS v4, I think it would be worth reviewing the many breaking changes between v3 and v4. This will help you better understand the modifications and new features.