Inline theme variables do not respond to custom variants

[rettimo]

What version of Tailwind CSS are you using?

v4.1.8

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

For example: @tailwindcss/postcss: 4.0.14, vite: 5.4.10, @tailwindcss/vite: 4.1.8, react: 18.3.1, react-dom: 18.3.1,

What version of Node.js are you using?

v18.20.3

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

I'm setting up global colors using inline theme variables:

@import 'tailwindcss';

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

@theme {
  --color-content: var(--color-white); // works
}

@theme static {
  --color-content: var(--color-white); // works
}

@theme inline {
  --color-content: var(--color-white); // does not work
}

@layer base {
  @variant dark {
    --color-content: var(--color-black);
  }
}

The issue is that when switching themes, the --color-content variable doesn't update when defined inside @theme inline {}. It always stays the same regardless of whether the .dark class is present.

This problem only affects the inline theme type. With @theme {} or @theme static {}, the variable updates correctly when the theme changes.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

[wongjn]

This is due to the intrinsic behavior of @theme inline. In the two cases where it works, we get CSS like:

…
@layer theme {
  :root, :host {
    …
    --color-white: #fff;
    --color-content: var(--color-white);
    …
  }
}
…
.bg-content {
  background-color: var(--color-content);
}
…

Notice how bg-content references var(--color-content).

If we compare to the @theme inline CSS:

…
@layer theme {
  :root, :host {
    …
    --color-white: #fff;
    …
  }
}
…
.bg-content {
  background-color: var(--color-white);
}
…

Notice how bg-content references var(--color-white). Hence updating --color-content in any rule has no effect. Simply put, @theme inline is not really meant to be used in this way that you are trying to use CSS variables.

In this case, you should consider using @theme without the inline tag.

[rettimo]

I use 'inline' following the recommendations regarding variable inheritance. I can leave it out if it is not that important. What do you think?

[wongjn]

The situation in the documentation does not apply to your use case. You should not use inline.

[rettimo]

Got it! Thank you!