Slow development hot reload

[metkm]

Environment

• Operating System: Windows_NT
• Node Version: v18.16.1
• Nuxt Version: 3.8.0
• CLI Version: 3.9.1
• Nitro Version: 2.7.0
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, css
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

Version

v2.9.0

Reproduction

I created the project using npx nuxi@latest init <project-name>. And only added nuxt UI.
https://github.com/metkm/nuxt-issue

Description

On empty project adding css: ['~/assets/main.css'] to config slows don't hot reload time to 5 to 6 seconds for me even though the .css file is empty

Additional context

No response

Logs

No response

[metkm]

current workaround right know

// css: ['~/assets/main.css'],
tailwindcss: {
  cssPath: "~/assets/main.css"
},

[frasza]

Hmmm to me, playing around with it, seems more like a problem adding tailwind

@tailwind base;
@tailwind components;
@tailwind utilities;

to the main.css file. I am not sure this is @nuxt/ui issue as I have had same feeling for some time now.

Creating main.css works fine, but when I add tailwind declarations in, it does indeed takes like 4 seconds to HMR.

To me it feels more like Nuxt or Nuxt Tailwind issue.

EDIT: I can also confirm moving css path in nuxtConfig to the tailwind: { cssPath } helps with the issue.

[metkm]

Probably something in between causes this issue, If you remove Nuxt UI OR use the workaround I found the issue disappears

[frasza]

Yeah I think Nuxt Tailwind is the issue here -- it is also Nuxt UI dependency in this usecase.

[benjamincanac]

Could you tell me if disabling the @nuxt/devtools fixes the issue?

[frasza]

@benjamincanac No, it does not on my end.
I firmly believe its an issue adding css with tailwind declarations in nuxt.config under css because Tailwind already loads css and that duplicates it (or something like that, I am not sure).
I have played with configs around and that is only conclusion from my side.

[benjamincanac]

Thank you for the informations, will try to investigate asap!

[rlightner]

We see this in our initial startup as well, even with the above mentioned tailwindcss: {} settings.

WARN  Slow module @nuxtjs/tailwindcss took 7025.78ms to setup.
WARN  Slow module @nuxt/ui-edge took 7164.93ms to setup.

[benjamincanac]

The tailwindcss.cssPath config is not a workaround though, it is the correct way to override the css as the @nuxtjs/tailwindcss module automatically injects the default css:

@tailwind base;
@tailwind components;
@tailwind utilities;

So if you add another css file with the same config, it is normal that Tailwind gets duplicated.

[rlightner]

In my case if I don't have the @tailwind items in the main.css file, the tailwind classes are not injected.
My current config:

  tailwindcss: {
    cssPath: '~/assets/css/main.css',
    configPath: 'tailwind.config.ts',
    exposeConfig: false,
    viewer: false,
  },

[benjamincanac]

You shouldn't have to do that, @nuxt/ui installs @nuxtjs/tailwindcss which does that automatically: https://github.com/nuxt-modules/tailwindcss/blob/main/src/module.ts#L39

If you look at this starter: https://stackblitz.com/edit/nuxt-ui?file=nuxt.config.ts it works out of the box.

[frasza]

The tailwindcss.cssPath config is not a workaround though, it is the correct way to override the css as the @nuxtjs/tailwindcss module automatically injects the default css:

@tailwind base;
@tailwind components;
@tailwind utilities;

So if you add another css file with the same config, it is normal that Tailwind gets duplicated.

Correct. Regarding to the issue, I would say that is the correct answer. If you are to use default tailwind css in your custom css (for whatever reason, not required as module will hand that by itself)

@tailwind base;
@tailwind components;
@tailwind utilities;

then use tailwind's cssPath.

tailwindcss: {
    cssPath: '~/assets/css/main.css',
    ...
  },

This way Tailwind will not get duplicated and HMR speed will be as intended.