[SOLVED] How disabled dark mode in tailwind css

How disabled dark mode in tailwind css

I'm using the package laravel livewire table ([laravel livewire table][1]

[1]: https://github.com/rappasoft/laravel-livewire-tables) on my laravel app (v8).

I also use tailwind CSS on v3.

By default this package add some tailwind class for dark mode on tables. But I don't want to use dark mode. I want my site to stay light whatever the browser configuration.

I read that I have to set it on tailwind.config.js so I try some things like :

module.exports = {

    plugins: [require('@tailwindcss/forms')],
    darkMode: false,
};

module.exports = {

    plugins: [require('@tailwindcss/forms')],
    darkMode: 'class',
};

module.exports = {

    plugins: [require('@tailwindcss/forms')],
    darkMode: 'media',
};

No one works for disabling dark mode...

Do you know how to do it?

Solution

https://github.com/rappasoft/laravel-livewire-tables package uses dark mode in itself, so it is configured to work that way.

The thing you can do is to always force light mode by doing something like this:

module.exports = {
  darkMode: 'class',
  // ...
}

And then in header of your page, you can have this small script that will override everything and just use light mode.

localStorage.theme = 'light'

Resource: https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection