Including referenced color variables from cli

[eric-gurney-omac]

This probably just isn't supposed to work, but I am attempting to reference a color variable (e.g. --color-blue-100) from one of my source files. That does not cause that color variable to be included in the output css generated by tailwind. If I add a comment in my code that uses a class that uses that variables (e.g. ), then the color is included as expected.

Is there any way to include referenced color variables from the tailwind cli?

Thanks,
Eric

[wongjn]

How are you referencing the CSS variables? Could you share an exact code snippet or a git repo that reproduces the behavior please?

[eric-gurney-omac]

I have a prefix of tw set:
.mud-table-row:nth-child(odd) { background-color: var(--tw-color-blue-200); }

[follesoe]

I am experiencing the same thing I believe.

I have a tailwind.config.js file still after upgrading to Tailwind 4.

In the file I have a color: x3dark that I want to reference in a custom utility (this works in Tailwind 3).

@utility bg-black-gradient {
  background: radial-gradient(
    circle,
    var(--color-x3dark) 0%,
    rgba(27, 29, 31, 1) 35%,
    rgba(37, 40, 43, 1) 100%
  );
}

However, when inspecting the page, the --clolor-x3dark variable is not set. It also looks a bit arbitrary which values are actually included in the compiled .css file from the Tailwind CLI?

I.e.:

/*! tailwindcss v4.0.13 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --color-indigo-200: oklch(0.87 0.065 274.039);
    --color-gray-200: oklch(0.928 0.006 264.531);
    --color-gray-400: oklch(0.707 0.022 261.325);
    --color-gray-500: oklch(0.551 0.027 264.364);
    --color-gray-700: oklch(0.373 0.034 259.733);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-sm: 24rem;
 

I have no idea why say --color-indigo-200 variable is included in the @layer theme { :root, :host { ... }, I am not referencing it anywhere 🤷.

[wongjn]

There would normally be a Tailwind-generated class that uses --color-indigo-200, and thus it is included.

[follesoe]

Yes, but why just that slim subset (only 5 colors), I use a bunch of others and none of those are generated as explicit variables like this...

[follesoe]

In the other cases, the color variables are replaced with the variable value build time, so when I look in the generated code, it doesn't reference any color variables (they have all been replaced). But in my example I have a specific case where I do want to reference a variable, and in TW3 this worked just fine.

[wongjn]

but why just that slim subset (only 5 colors

Tailwind keeps a track of CSS variables used and keeps those for the final output.

I use a bunch of others and none of those are generated as explicit variables like this...

I tried your example in Tailwind Play and it seems to keep the CSS variable in the generated CSS. This could indicate something particular to your project causing the unexpected behavior. Consider providing a git repo that reproduces your issue if you'd like more assistance.