Laravel 8 Tailwind 3 darkmode isn't working

So I'm trying to enable darkmode on my site. I've added a toggle to my app.layouts file which adds and removes the dark class to the element at the root of my file and toggling the checkbox adds and removes this class.

I have added darkMode: 'class', to the top of my tailwind.config.js file (right below module.exports = {

I have ran npm run dev and npm run dev watch and Ive cleared my caches (i have this in a route for convenience at the moment)

my page has a div which contains a background colour and one when in dark mode

<div class="w-full text-center bg-blue-300 dark:bg-blue-600">34</div>

tailwind is loading and the region is being shown with the bg-blue-300 colour shown but when i toggle to dark mode nothing changes except the class of dark is added to my <html> element like this <html class="dark" lang="en">. I have checked the docs and can't see any step I have missed.

I followed this tut https://www.section.io/engineering-education/implementing-dark-mode-using-tailwind-css/

my plan is to switch the tailwind config setting from class to media and remove the toggle button once I know it will work.

** EDIT ** thanks to @lordisp it seems that the underlying functionality is working but the classes in the css are not present. I guess I could add a full minified tailwind.css file but would rather just compile the assets I need.

So looking in my tailwind.config.js file i have the following in the content section

ontent: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './vendor/wire-elements/modal/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

So it looks like the livewire components are getting loaded so they should have the css added right?

Solution

Add your dark-mode classes to Safelisting classes in your tailwind.config.js:

module.exports = {
    darkMode: 'class',
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './vendor/wire-elements/modal/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],
    safelist: [
        'bg-blue-300',
        'bg-blue-600',
    ],
    // ...
}