tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

[v4] Tailwind CSS classes not updating in output when adding previously unused classes - requires server restart

Open binajmen opened this issue 1 year ago • 1 comments

What version of Tailwind CSS are you using?

"@tailwindcss/vite": "^4.0.0-alpha.30",
"tailwindcss": "^4.0.0-alpha.30"

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

"@solidjs/start": "^1.0.9",
"vinxi": "^0.4.3"

What version of Node.js are you using?

"node": ">=18"

What browser are you using?

Firefox

What operating system are you using?

macOS

Reproduction URL

Since SolidStart isn't currently working on Stackblitz, please test locally:

  1. Clone the repository: git clone https://github.com/binajmen/bun-solidstart-tw4
  2. Install dependencies and start the dev server: bun install && bun dev
  3. You should see a colored background on the index page
  4. Try changing the background color class in app.tsx (e.g., to bg-blue-400) and save the file
  5. The background will turn white instead of updating to the new color
  6. Only after manually restarting bun dev will the new background color appear

Describe your issue

When adding Tailwind classes that weren't previously used anywhere in the codebase, these new classes aren't being included in the generated CSS file. The changes only take effect after manually restarting the development server.

binajmen avatar Oct 26 '24 09:10 binajmen

Same issue here on beta 1 using TanStack Start

matmkian avatar Nov 22 '24 14:11 matmkian

Confirmed on beta 6 using the CLI directly. All of the following invocations fail to rewrite the existing file and remove unused classes from previous writes, whether it's a fresh run of the CLI or watch mode, and regardless of whether the optimize/minify flag is passed.

tailwindcss -i input.css -o output.css
tailwindcss -i input.css -o output.css --watch
tailwindcss -i input.css -o output.css --optimize
tailwindcss -i input.css -o output.css --minify
tailwindcss -i input.css -o output.css --optimize --watch
tailwindcss -i input.css -o output.css --minify --watch

The only way to get a fresh rewrite is to delete the file and re-run the CLI build.

EDIT: I think I misread the issue and I'm reporting something unrelated.

shirakaba avatar Dec 11 '24 08:12 shirakaba

Same issu here using sveltekit@5

matheustavarestrindade avatar Jan 03 '25 22:01 matheustavarestrindade

Same issue with [email protected], @tailwindcss/[email protected] and [email protected]

rtritto avatar Jan 24 '25 14:01 rtritto

I also experienced this issue on Solid Start.

You don't need to restart the server actually, just re-saving the CSS file that has the tailwindcss import will cause it to pick up the changes.

I think tailwindcss plugin expects to run before other plugins and that's why it's breaking here. In their docs they show adding tailwindcss plugin before solid's plugin for example.

MAST1999 avatar Jan 27 '25 23:01 MAST1999

I think tailwindcss plugin expects to run before other plugins and that's why it's breaking here. In their docs they show adding tailwindcss plugin before solid's plugin for example.

I'm using Vike with Solid and daisyUI. In the daisyUI doc, the @tailwindcss/vite plugin is the first plugin but I still have the same issue.

rtritto avatar Jan 28 '25 06:01 rtritto

Same problem here, I'm using tailwindcss@^4.0.0, @tailwindcss/postcss@^4.0.0, and postcss@^8.5.1. For example, I can use text-red-500 and see updates, but when I try to use text-blue-500 (which is a class I haven't used before) then the text doesn't get the css style applied to it.

GabeMeister avatar Jan 28 '25 20:01 GabeMeister

This was happening to me as well on SolidStart 1.0.11 until I added an @config directive to my CSS file with my tailwind.config.ts location as described here: https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file

"@solidjs/start": "^1.0.11",
"@tailwindcss/vite": "^4.0.2",
"tailwindcss": "^4.0.2",
"vinxi": "^0.5.1",
"vite": "^5.4.10"

I am able to reproduce the issue by removing the @config directive or by commenting out my content: ['./src/**/*.{ts,tsx}'], section in tailwind.config.ts.

It sounds like this shouldn't be necessary in v4. Maybe a misconfiguration on my part, maybe an issue with Vite or the framework.

celeron450 avatar Feb 01 '25 01:02 celeron450

Can this issue be generated by multiple instances of tailwindcss dependency? Related discussion: #16135

rtritto avatar Feb 10 '25 22:02 rtritto

https://github.com/user-attachments/assets/e0b61faa-4423-4677-be43-222fa582df59

Hey! Sorry for the late reply but I've been playing with your repro and it seems like updating to 4.1.3 does fix this issue. Going to close this as resolved for now but if anyone is still seeing issues here, please create a new issue and attach a reproduction so we can fix this. Thanks!

philipp-spiess avatar Apr 11 '25 10:04 philipp-spiess