[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