I'm using Laravel with Vite and FluxUI (with Alpine.js) to implement a dark mode toggle in my application. Locally, everything works perfectly; the inline script in my <head> sets the dark class on the <html> element based on a value stored in localStorage (or system preference), and Tailwind's dark mode styles apply as expected.
However, when I deploy to production (using a Laravel Forge–provisioned server with Nginx), the page loads in light mode, and I see a mixed state (or sometimes no dark mode at all) even though the user preference is set to dark. I suspect something in the production build or server configuration is interfering with my inline script.
I tried to set it it's removed immediately, even if I do it in the console.
If in the console on the production server, write
Flux.dark = true
It prints true, but does not change to dark mode, impossible to set
<html class="dark">
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'selector',
// ...
};
Some resources I'v tried to use
- Flux UI: Segmented radio
- Dark Mode in TailwindCSS v4
I'm using Laravel with Vite and FluxUI (with Alpine.js) to implement a dark mode toggle in my application. Locally, everything works perfectly; the inline script in my <head> sets the dark class on the <html> element based on a value stored in localStorage (or system preference), and Tailwind's dark mode styles apply as expected.
However, when I deploy to production (using a Laravel Forge–provisioned server with Nginx), the page loads in light mode, and I see a mixed state (or sometimes no dark mode at all) even though the user preference is set to dark. I suspect something in the production build or server configuration is interfering with my inline script.
I tried to set it it's removed immediately, even if I do it in the console.
If in the console on the production server, write
Flux.dark = true
It prints true, but does not change to dark mode, impossible to set
<html class="dark">
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'selector',
// ...
};
Some resources I'v tried to use
- Flux UI: Segmented radio
- Dark Mode in TailwindCSS v4
1 Answer
Reset to default 0TailwindCSS v3
It seems that you're using TailwindCSS v3, but looking at the v4 documentation. In v3, the dark: "media" means that the dark mode is enabled based on the browser's prefers-color-scheme setting. To enable it with the .dark class, set the configuration to dark: "class".
Starting from v3.4.1, you should use the selector setting instead of class for the same functionality.
- Dark Mode - TailwindCSS v3 Docs
prefers-color-scheme- MDN Docs
TailwindCSS v4
If you're using v4, you should review the new CSS-first configuration instead of the legacy JavaScript-based configuration. This is how you can set it so that the dark: selector works with the .dark class:
@custom-variant dark (&:where(.dark, .dark *));
<html class="dark">
<body>
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
And you can also set it to use data-theme, like this:
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
<html data-theme="dark">
<body>
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
- Using a data attribute:
@custom-variant - With system theme support