Struggling to enable dark: prefix, css rules for it loaded in browser

[Drillan767]

Hello,
I've just upgraded Tailwind to 2.0.1, and started setting up the dark mode for a small website I'm working on.

I've made a simple test to see how I could use it, but it didn't simply work, I'm pretty sure I've done something wrong

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    darkMode: 'media',
    purge: [
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Manrope Regular', ...defaultTheme.fontFamily.sans],
            },

            fontSize: {
                xs: '0.75rem',
                sm: '0.875rem',
                base: '1rem',
                lg: '1.125rem',
                xl: '1.25rem',
                '2xl': '1.5rem',
                '3xl': '1.875rem',
                '4xl': '2.25rem',
                '5xl': '3rem',
                '6xl': '4rem',
            },

            height: {
                "10v": "10vh",
                "20v": "20vh",
                "25v": "25vh",
                "30v": "30vh",
                "40v": "40vh",
                "50v": "50vh",
                "60v": "60vh",
                "70v": "70vh",
                "75v": "75vh",
                "80v": "80vh",
                "90v": "90vh",
                "100v": "100vh",
                "full": "100%",
            },
        },
    },

    variants: {
        opacity: ['responsive', 'hover', 'focus', 'disabled'],
        fontWeight: ['hover', 'focus'],
    },

    plugins: [require('@tailwindcss/ui')],
};

Here is how I imported Tailwind:

@import "partials/fonts";
@import "partials/logo";
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "~tailwindcss/dist/tailwind.min.css";

And this is the HTML I'm using:

<nav class="bg-white dark:bg-black">
        <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
           ...
        </div>
</nav>

I don't know if this is sufficient, I still tried to setup the manual dark mode but it didn't work either.

Thank you in advance

[MathGeniusJodie]

how does the css output look?

[Drillan767]

Hello, sorry I didn't saw your answer earlier!

This is an example of the html I'd like to use:

And here is the generated CSS I can see in my navigator:

As you can see, there is no trace of any dark: class, even being overriden.

[simonswiss]

Hey!

Is this still an issue?

Something looks wrong with your setup. You definitely should not import the dist version of Tailwind from the node_modules

Are you doing this because you had no styles without that line? If so, you are probably not setting PostCSS the right way.

Could you possibly share a code repo to have a look at?

[Drillan767]

Hello!
Let's say that it's not an issue anymore. I found out that I indeed didn't set PostCSS, however I had a LOT of struggles to find a way to set it right, it could have been an issue on its own. However, since I'm working with Laravel + JetStream + Tailwind, I found a package that did everything I needed in just one line inside my webpack mix configuration. So now I DO have the dark theme enabled and the @apply that work (it didn't before)
But thanks for your time!