Bug: variants do not get exported, even with purging disabled

[UltraCakeBakery]

Hi there!

This plugin looks exactly like what I need for one of my projects. Sadly I cannot get it to work properly. I use Nuxt for this project. The variants style's do not get generated.

Currently I've got the following configuration that is based on the default configuration that comes with nuxt's tailwind module

const defaultTheme = require( 'tailwindcss/defaultTheme' )
const { themeVariants } = require( 'tailwindcss-theme-variants' )

module.exports = {
    purge: {
        mode: 'layers',
        enabled: process.env.NODE_ENV === 'production',
        content: [
            'components/**/*.vue',
            'layouts/**/*.vue',
            'pages/**/*.vue',
            'plugins/**/*.js',
            'nuxt.config.js',
            // TypeScript
            'plugins/**/*.ts',
            'nuxt.config.ts'
        ]
    },
    theme: {
     // <removed-to-keep-issue-short>
    },
    variants: [
        'responsive',
        'hover',
        'focus',
        'active',
        'group-hover',
        'group-focus',

        'light',
        'light:hover',
        'light:focus',
        'light:active',
        'light:group-hover',
        'light:group-focus',

        'dark',
        'dark:hover',
        'dark:focus',
        'dark:active',
        'dark:group-hover',
        'dark:group-focus'
    ],
    plugins: [
        themeVariants({
            themes: {
                light: {
                    mediaQuery: '@media (prefers-color-scheme: light)'
                },
                dark: {
                    mediaQuery: '@media (prefers-color-scheme: dark)'
                }
            }
        })
    ]
}

Tailwinds VSCode plugin does actually show the right css that should get generated, however it simply does not when in dev mode with HMR or building for production.

The css for the variants does not get created/exported. The classes are empty and have no styling at all when inspecting classes with devtools.

Reproduction

1. create a simple nuxt starter app: $ npm init nuxt-app <name> . After selecting the tailwind module you can just spam enter to apply all default configurations
2. Select the Tailwind module in the setup
3. Add my config
4. npm run dev
5. Try and use the tailwind variants in ~/pages/index.vue.

You should see this does not work. If not, its something wrong in my setup. In that case I happily help debugging it :)

If there is anything I can do to help let me know.

[JNavith]

Oops, sorry I left this unanswered! I tried a few days ago, and indeed the styles don't work. I tried investigating the generated CSS but my unfamiliarity with Nuxt prevented me from finding such a file even after build and generate.

I also tried using Tailwind's own dark mode with media and that doesn't seem to work either! But what's weird is that that seems like it would be a common problem, though I wasn't able to find any existing issues / discussions / troubleshooting about it (after an admittedly short time searching).

While it's probably not helpful to point out, the given plugin configuration worked as expected in a Svelte project—after changing the variants configuration to only be for color utilities because the CSS was 43 MB otherwise!

[UltraCakeBakery]

No problem! Thank you for taking the time to look in to the issue!

I also tried using Tailwind's own dark mode with media and that doesn't seem to work either! But what's weird is that that seems like it would be a common problem, though I wasn't able to find any existing issues / discussions / troubleshooting about it (after an admittedly short time searching).

If I remember correctly, to have nuxt extract CSS in to separate CSS files you need to add the following to the nuxt.config.js file:

    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {
        extractCSS: true
    },

Nuxt's tailwind module currently still uses tailwind 1.9.4. That would explain tailwinds darkmode not working out of the box currently. I'm not familiar with how tailwind works in terms of plugins and nuxt's build process.

While it's probably not helpful to point out, the given plugin configuration worked as expected in a Svelte project—after changing the variants configuration to only be for color utilities because the CSS was 43 MB otherwise!

When SvelteKit is out of early access / beta I'm planning to migrate the entire project asap. Unrelated to this issue, it is some handy information haha.

If the extractCSS option doesn't give you more information I will open an issue on the nuxt tailwind module too. Maybe it is a compatibility kinda thing.

[JNavith]

Got to go, so the most I can say right now is that upgrading to Tailwind 2 made the plugin work: https://tailwindcss.nuxtjs.org/setup/#tailwind-2

I still test for Tailwind 1.9 so I don't know why it didn't work there. Will try again eventually.

[UltraCakeBakery]

Nuxt tailwind's component has a merge ready for tailwind 2.0 by default. No testing needed maybe when that version comes around. Thanks for the info. I will it once i've got time

[UltraCakeBakery]

nuxt-tailwind upgraded to version 2.0 so this issue can be closed. I also found out that it is very easy to add your own variants: https://tailwindcss.com/docs/plugins#adding-variants so if someone still experiences this issue you might be better off adding your own.

Thanks for the help @JakeNavith !