How add darkMode: class
in tailwind.config.js
, it is missing in Laravel 12.
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 *));
@custom-variant
directive - TailwindCSS v4 DocsRelated 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.