Tailwind refreshes components extremely slowly in Nuxt 3

This issue has been tracked since 2022-11-01.

Version

@nuxtjs/tailwindcss: 6.1.2
nuxt: 3.0.0-rc.11

Steps to reproduce

I am working on a Nuxt 3 project and am using the @nuxtjs/tailwind module to speed up styling. I am using many imported style sheets and noticed after a little that any tailwind change would take some time, sometimes over 30 seconds, to reflect the change on the front end.

These are I believe the relevant aspects of my nuxt.config.ts:

modules: [
    '@nuxtjs/tailwindcss',
],
vite: {
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "@/assets/styles/tailwind.scss";',
            },
        },
    },
    plugins: [ svgLoader()]
},
tailwindcss: {
    jit: true,
    exposeConfig: true,
    config: {
        plugins: [ 
            tailwindTypography,
        ]
    }
}

Here is my tailwind.config.js file:

module.exports = {
    mode: 'jit',
    content: [
        './components/**/*.{vue,js}',
        './layouts/**/*.{vue,js}',
        './pages/**/*.{vue,js}',
        './plugins/**/*.{js,ts}',
        './nuxt.config.{js,ts}'
    ],
    theme: {
        extend: {
            (*Custom configuration*)
        }
    }
}

I am not sure of how optimized this configuration is, but this is what I have gathered from researching around.

What is Expected?

I expect the classes to update fairly quickly, and I can achieve this by commenting out the default tailwind imports in my style sheet. This is also the sheet that imports all of my custom classes.

// @import 'tailwindcss/base';
// @import 'tailwindcss/components';
// @import 'tailwindcss/utilities';

@import 'variables';
@import 'mixins';

@import 'normalize';
@import 'fonts';
@import 'typography';
@import 'buttons';
@import 'forms';
@import 'core';
@import 'transitions';

I saw this solution on a Stack Overflow question that was intended for Next.js and found that the same solution works, but limits my ability to inline style. I am not sure of the exact behavior pattern, but occasionally inline styles do not apply as they should. Instead, I use @apply, which is not the largest inconvenience, but any guidance on configuration to allow for inline styling with faster reflection of changes on the frontend is appreciated!

I have attached videos to highlight the disparity in time.

More Details About Repo
Owner Name nuxt-modules
Repo Name tailwindcss
Full Name nuxt-modules/tailwindcss
Language TypeScript
Created Date 2019-04-04
Updated Date 2023-03-29
Star Count 1285
Watcher Count 12
Fork Count 157
Issue Count 57

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date