Changes in CSS file do not update Next.js setup

[killthecreator]

Section says that i can use CSS variables directly. It might be true in case of static theme, but it does not work for custom non-static theme which gets only the values picket up by the scanner from classnames.

The confusion is that it is never mentioned, that scanner does not pickup CSS variables used directly to include them in a server theme layer:

[philipp-spiess]

Hey there! This seems like a bug on our end, I agree that this should just work. We'll look into it.

In the mean time, can you maybe share the contents of the file that references the CSS variable? I want to make sure we add a test case for your setup 👍 Also curious what extension you are using? Vite/CLI/PostCSS or something else?

[killthecreator]

Hey there! This seems like a bug on our end, I agree that this should just work. We'll look into it.

In the mean time, can you maybe share the contents of the file that references the CSS variable? I want to make sure we add a test case for your setup 👍 Also curious what extension you are using? Vite/CLI/PostCSS or something else?

Hey there, thank you so much for a quick reply.

My setup is:
"next": 14.2.14 (therefore PostCSS extension)
"tailwindcss": 4.0.14
"@tailwindcss/postcss": 4.0.14
"postcss": 8.4.41

Issue persists both in client and server components

App server is ran within docker container

[killthecreator]

Update:
I created a dummy Next.js App (sorry, should have tested with such minimal settings initially). Turns out containerization is not the issue, but it does not update in Next.js app in general.

How to reproduce:

1. Create Next.js app via npx create-next-app@latest and start a server

2. set two random variables in @theme in global.css file
   e.g.
   @theme { --color-background: red; --color-foreground: pink; }

3. Go to any component a try to render a plain <div />.

4. Add a style to that div with CSS var as <div style={{ color: "var(--color-foreground)" }}/>

5. Notice that static CSS file is not refreshed therefore CSS Var is not added.

6. Try to save (with or without changes) any .css file and notice that it refreshes static CSS file

7. Try to change variable and notice that until you save .css file or restart the server the variable is not picked up

[killthecreator]

Update:

I've setup a dummy vite project and tested all the steps above. Issue still persists. Workaround currently is the same: restart vite server or save any .css file

[philipp-spiess]

@killthecreator Thanks a ton for the report. We looked into it and will get a fix out for it today.