@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?