[v4.0.9] Variables are ignored when referenced within CSS Modules

[boylett]

What version of Tailwind CSS are you using?

For example: v4.0.9

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

Vite 6.2.0

What version of Node.js are you using?

22.0.0

What browser are you using?

Chrome, Safari and Firefox

What operating system are you using?

macOS and Windows

Reproduction URL

https://github.com/boylett/tailwind-4-0-9-cssmodule-var-bug

Describe your issue

When referencing the main theme file within CSS Modules, variables are no longer recognised and exported in the main CSS.

This works fine in 4.0.8 (see 'working' branch) so am inclined to believe it has something to do with the new @reference keyword.

Within reproduction, the background colour of the main "Welcome" component wrapper should be --color-hot-pink rather than transparent.

On the 'main' branch, tw 4.0.9, the variable is simply ignored and not included in the final CSS.

[philipp-spiess]

Hey! Thanks for the bug report. The issue is that right now we do not scan .css files for possible CSS variables we use. We'll keep this open while we're thinking about how to resolve this issue.

[mcmxcdev]

We have the same issue, all CSS variables which are not referenced inside e.g. .tsx files are getting purged with a setup like below (simplified example).

On top of that, we have e.g. --text--primary: var(--color-gray-3); which doesn't work anymore since --color-gray-3 could get purged if its not directly used anywhere.

References like --color-background-canvas: var(--background--canvas) -> --background--canvas: var(--color-white) -> --color-white: #ffffff should also still work.

tailwind.css:

@layer reset, theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
/* @import "tailwindcss/preflight.css" layer(base); */
@import "tailwindcss/utilities.css" layer(utilities);

@custom-variant dark (&:where(.darkMode, .darkMode *));

@theme inline {
  --color-*: initial;
  --color-white: #ffffff;
  --color-gray-1: #f3f5f7;
  --color-gray-2: #e9ebee;
  --color-gray-3: #dadde0;

  --color-background-canvas: var(--background--canvas)
  --color-background-base: var(--color-gray-2);
  --color-background-dark-base: var(--color-gray-3);
}

theme.css:

@reference "./tailwind.css";

@layer theme {
  .lightMode {
	--background--canvas: var(--color-white);
    --text--primary: var(--color-gray-1);
    --text--secondary: var(--color-gray-2);
    --text--disable: var(--color-gray-3);
  }

  .darkMode {
    --background--canvas: var(--color-gray-3);
    --text--primary: var(--color-gray-3);
    --text--secondary: var(--color-gray-2);
    --text--disable: var(--color-gray-1);
  }
}