[v4.1.3] Saved changes not reflected between hot-reloads / refreshes

[andymerskin]

I'm not sure if this is directly related to this PR, but after updating to Tailwind v4.1.3 which includes this change, I'm still not seeing changes reflected on each hot reload (but sometimes it works!), forcing me to restart my dev server for simple className changes in any context. For some reason Tailwind isn't picking up on new utilities being used. I haven't fully pinned down the cases where it's happening, but it's difficult to reproduce reliably.

Most recently, I changed the ordering inside a clsx + tailwind-merge call (cn), to change a string className, and move a className prop value at the end:

// before
<div className={cn("bg-white", className, getMyClassnames(props))} />

// after
<div className={cn("bg-black", getMyClassnames(props), className)} />

No hot reload and no update after a hard refresh, but after restarting the dev server, my change looked correct. Note that getMyClassnames(...) is returning a string of Tailwind classes.

Project details:

• React 17 SPA on Vite 4 6 and Turborepo, with SWC plugin
• We previously used Twin.Macro w/ Tailwind v3 and migrated it over to Tailwind v4

Environment:

• turbo 2.0.4
• vite 4.5.6 6.2.5
  • @vitejs/plugin-react-swc 3.8.1
  • @swc/plugin-styled-components 7.1.0
• react 17.x
• tailwind 4.1.3
• typescript 4.9.3

Overall things are working fine. If upgrading Vite or Turbo is necessary to squash some of this behavior, happy to do it, but it may be quite a lift for us depending on how smoothly that goes.

I don't currently have time to put together a repro repo, but if my schedule opens up I may give it a shot. I'm more curious if anyone else is experiencing this with the latest version.

Originally posted by @andymerskin in #17554 (comment)

[andymerskin]

Update:

1. Taking turbo out of the equation and running the Vite server by itself, I'm still experiencing these issues. I expected this, since Vite's always driving the dev server anyway, but it's one less thing to worry about.
2. I upgraded to Vite 6.x (along with its plugins we're using), and this unfortunately didn't solve the issue. I was hoping maybe there may have been bugs around hot-reloading that might've been fixed after upgrading.

[samuba]

Can confirm this being an issue with 4.1.3. After downgrading to 4.1.2 it works fine.
I'm running a NextJS Project.

[zilahir]

+1 confirm here as well:

"tailwindcss": "^4.1.3",

the only difference that its not working for me with 4.2.1 either.

[pirsani]

+1 confirm,

hot reload not working on tailwind 4.1.2 , 4.1.3 , 4.1.3 using nextjs 15.3.1

event if I restart my pnpm dev it still not pick up new class utilities,

only after I remove .next it will regenerate new css.

is there any work around ? or did I overlook something?

[wesleyjanse]

Same issue here, the styles are not loaded in correctly. I have the manually refresh for it to pickup the new colors. tailwind 4.1.3 and next 15.3

[Achaak]

Same here, anyone have a version of tailwind and nextjs that would work? 🤔

[wesleyjanse]

I managed to resolve the issue by disabling turbopack dev mode

[andymerskin]

After using Tailwind v4.1.3+ for a while and resolving circular dependencies in my CSS files, my issues seemed to go away. No longer needing to restart the local dev server anymore.

I was importing separate CSS files for individual components that were relying on Tailwind for @apply syntax, which were importing my main index.css to get access to the Tailwind theme for my project.

Because I was importing those files inside their respective components, it was not only duplicating imports for that CSS, but I wasn't using @reference instead of @import for my index.css file in those component CSS files, which created the circular dependency. This would cause Vite to freak out on HMR triggers when I'd save files, forcing it to bust cache and attempt a full reload.

These reloads would fail with request errors from Vite due to referencing those CSS files in component files.

TL;DR solution:

1. Import your component CSS files that rely on Tailwind @apply or define utilities, etc. in your index.tsx (or root JS file) so they're only importing once.
2. Make sure to use @reference instead of @import in those CSS files so you can benefit from your project's Tailwind theme config + any customizations you have.

If anyone else is experiencing more issues, feel free to re-open if necessary.