@reference causing re-renders in non related component with HMR

[bigboggy]

What version of Tailwind CSS are you using?

v4.1.3

What build tool (or framework if it abstracts the build tool) are you using?

Vite 6.2.5

What version of Node.js are you using?

v22.14.0

What browser are you using?

Chrome

What operating system are you using?

Ubuntu

Reproduction URL

There is none because it's related to the npm run dev process. But attached is a screenshot where I change only something in ProgressSection.vue, the style is scoped and it re-builds basically all components

Describe your issue

When running npm run dev, and making a change to one component, instead of the HMR triggering change only for this component, it triggers changes to ALL components that have @reference '@/style.css';

We need the @reference, because we want to use @apply instead of writing the styles inline. Falling back to inline is not an option for us, because the project then will not be maintainable and the code not readable.

In tailwindcss 3, the apply did not create such issues, because we didn't have to use @reference to use it.

Now it takes around 5-10 seconds to show a letter change from a vue component over vite, it's like going back to webpack 😆

Yes, I have read the documentation that we could use var(--bg-blue-500) or something, but then we can't use spacings, breakspoints etc, all the benefits of tailwind.

[philipp-spiess]

Hey! Yeah agree that this is unexpected (and also absurdly slow. 5-10 seconds??!). My guess is that this probably happens because the @reference will still cause your templates to be scanned for utilities (even though they are of no use as they would not be emitted).

Can you set a up a minimal reproduction that we can use to look into this?

[bigboggy]

@philipp-spiess sure I'll post a github repo here

[bigboggy]

Hey! Yeah agree that this is unexpected (and also absurdly slow. 5-10 seconds??!). My guess is that this probably happens because the @reference will still cause your templates to be scanned for utilities (even though they are of no use as they would not be emitted).

Can you set a up a minimal reproduction that we can use to look into this?

https://github.com/railroadmedia/tailwindcss4-performance-issue/

Here you go @philipp-spiess

I've added some instructions in readme but also in the card text, the file is here

https://github.com/railroadmedia/tailwindcss4-performance-issue/blob/main/src/application/App.vue

And yeah the example is one second delay, but on our real page it's longer since we have a lot more components, if you remove the components and restart with npm run dev, you'll see the changes are instant.

[matmeylan]

I'm having the same performance problem in an angular project where we heavily use .css files with @apply and @reference. It takes more than a minute to rebuild at every change, even for a minor single file change.

Found a workaround where I basically duplicated my theme file just for usage with @reference where I exclude sources. Here's a sample of my "reference" file.

@import 'tailwindcss' source(none); /* this does the trick */
@import './base.css';
@import './theme.css';
@import './plugins.css';

This seems to have helped reduce our rebuild time back to seconds.

[bigboggy]

I'm having the same performance problem in an angular project where we heavily use .css files with @apply and @reference. It takes more than a minute to rebuild at every change, even for a minor single file change.

Found a workaround where I basically duplicated my theme file just for usage with @reference where I exclude sources. Here's a sample of my "reference" file.

@import 'tailwindcss' source(none); /* this does the trick */
@import './base.css';
@import './theme.css';
@import './plugins.css';
This seems to have helped reduce our rebuild time back to seconds.

Tried it, it works faster but now all my sizes etc are broken, where are the base, theme, plugins css coming from?

[matmeylan]

I'm having the same performance problem in an angular project where we heavily use .css files with @apply and @reference. It takes more than a minute to rebuild at every change, even for a minor single file change.
Found a workaround where I basically duplicated my theme file just for usage with @reference where I exclude sources. Here's a sample of my "reference" file.
@import 'tailwindcss' source(none); /* this does the trick */
@import './base.css';
@import './theme.css';
@import './plugins.css';
This seems to have helped reduce our rebuild time back to seconds.

Tried it, it works faster but now all my sizes etc are broken, where are the base, theme, plugins css coming from?

That's my own project structure where I've split the base, theme and plugin into theme.css, base.css and plugin.css files co-located. You could have everything in the main css file instead of doing @import './base|theme|plugins.css'.

For instance:

/* app.css */
@import 'tailwindcss';
@layer base {
 ...
}
@theme  {
  ...
}
/* app-reference.css for @reference calls */
@import 'tailwindcss' source(none);
@layer base {
 ...
}
@theme  {
  ...
}

Because I have a "duplicate" css file for @reference, it makes sense to factor and import this code to avoid repetition.

[anotherglitchinthematrix]

This issue is taking me more time than a full production build :^) Hope it gets fixed soon

[thecrypticace]

I've merged a fix for this and it'll be in the next release. The fix prevents file scanning when using @reference but there's still an issue with Vite itself triggering a rebuild of all of these files because of watched file dependencies where we don't want it to. I've left some details in #17836 with a workaround for that while we look into figuring out some kind of solution.

[guesant]

thank you so much @thecrypticace !
tailwindcss is great!!

it has been a pain to type a single letter in nuxtjs projects, each time was need to full reload the page, with a build time of >10s, even if not related with css

everytime a error screen appears as "vite:import-analysis" error

🤞 waiting for the next release