[v4] importing tailwindcss/utilities breaks hmr

[Matheun]

Im using:

• tailwind v4.0.0-alpha.17 ( @tailwindcss/postcss )
• nuxt v3.12.3
• sass v1.77.8

The following code works perfectly:

@import "../theme/_index.scss" layer(theme);

@import "tailwindcss/preflight" layer(base);
@import "../base/_index.scss" layer(base);
@import "../plugins/postcss/_index.scss" layer(base);

@import "../plugins/formkit/_index.scss" layer(components);

But whenever i try and import the utilities from tailwind like so:

@import "../theme/_index.scss" layer(theme);

@import "tailwindcss/preflight" layer(base);
@import "../base/_index.scss" layer(base);
@import "../plugins/postcss/_index.scss" layer(base);

@import "../plugins/formkit/_index.scss" layer(components);

@import "tailwindcss/utilities" layer(utilities);

The HMR stops working, it does still say that the HMR got updated but it wont actually apply the changes to the front-end. Whenever i save my main scss file, the changes actually get applied.

[amiii123malviya]

Hello,

Is this issue still active? I would like to work on this.

Best Regards.

[Matheun]

Yes, this is still an issue

[cris458carlo]

Hello, you’re encountering an issue with Hot Module Replacement (HMR) when importing Tailwind CSS utilities. This can be frustrating, but let’s try to troubleshoot it together.

Here are a few things you can check:

Order of Imports: Ensure that the order of your imports is correct. Sometimes, the order can affect how styles are applied and how HMR works. Tailwind Configuration: Verify that your tailwind.config.js is correctly set up and includes the necessary layers and paths. Nuxt Configuration: Check your Nuxt configuration to ensure that it is properly set up to handle PostCSS and Tailwind CSS. Make sure you have the necessary modules and plugins installed and configured. Cache Issues: Sometimes, caching can cause issues with HMR. Try clearing your cache or restarting your development server. Dependencies: Ensure all your dependencies are up to date. Sometimes, mismatched versions can cause issues. Error Logs: Check your browser’s console and terminal for any error messages that might give you more insight into what’s going wrong. Here’s a sample configuration for Nuxt with Tailwind CSS and PostCSS that you can compare with your setup: // nuxt.config.js export default { buildModules: [ '@nuxt/postcss8', '@nuxtjs/tailwindcss', ], css: [ '@/assets/css/main.scss', ], build: { postcss: { plugins: { tailwindcss: {}, autoprefixer: {}, }, }, }, } If everything seems correct and you’re still facing issues, you might want to try a different costcoess approach to importing Tailwind CSS utilities, such as using the @apply directive within your SCSS files instead of importing the utilities directly.

[Matheun]

Please read the issue before commenting, your talking about handling this issue for tailwind v3, im encountering this issue with tailwind v4.

Thus making your comment useless

[boylett]

Am experiencing this as well in alpha.20. Removing @import "tailwindcss/utilities" layer(utilities); from my root stylesheet fixes the problem but, of course, leaves me without any utilities.

Console logs:

[Error] TypeError: Importing a module script failed.
    warnFailedUpdate (client:174)
    (anonymous function) (client:213)
[Error] [hmr] Failed to reload /app/root.css. This could be due to syntax errors or importing non-existent modules. (see errors above)
    warnFailedUpdate (client:176)
    (anonymous function) (client:213)

[philipp-spiess]

Hey @Matheun and @boylett! Does either of you have a minimal repro for this issue? We're currently working on rebuilding our Vite extension but haven't encountered this particular problem.

Update: We noticed that there are some issues when using Tailwind CSS v4 in a Nuxt project. Are you both using Nuxt?

[boylett]

I'm using Remix. Frustratingly I can't seem to reproduce this on a fresh install - however, this does seem to be a widespread issue relegated only to Safari on macOS/iOS. Doesn't happen at all on Chrome or Firefox.

The same problem occurs when working with SvelteKit as well as in many other contexts, many of them involving Safari. Note that doing a hard-refresh (⌥+⌘+E → ⌘R) does indeed prevent the error until you next save a change.

Doesn't necessarily seem to be a Tailwind-specific issue, but possibly something to do with the way Safari caches modules constructed with frameworks like vite?

I opened Safari and Chrome side-by-side and went along developing as normal, and Chrome updated as expected with no errors at all while Safari failed miserably.

tl;dr – Likely a Safari caching issue.

---

Edit: Occasionally I am noticing that HMR mixes up the order of Preflight and Base/Utilities, causing preflight's reset to override all other utilities. This is fixed after a manual refresh. Should I make a separate issue for this?

[philipp-spiess]

Thanks for the writeup @boylett. Agree that these issues you linked don't seem to be related to Tailwind.

The latest alpha release (v4.0.0-alpha.23) contains a lot of changes in regards to how the Vite plugin works. It would be great if both of you can try to upgrade and let us know if the issue persists? I wasn't able to repro this myself so any information on how to do that would be really helpful here.

[Matheun]

@philipp-spiess I manage to get it working now using the vite plugin and .css files. But i kindof really need to use scss files, for some reason they dont load correctly? i have no clue why or how.

When inspecting the style editor in the inspector, every variable is defined as expected and the layers are correct. But when i add the class pt-4 to an element, nothing happens. The default variables are also not defined when inspecting the root html even tho they are in the style editor.

Also, when using