In Tailwind v4, how can I define a configuration variable that depends on a runtime CSS variable?

[kamyarkaviani]

I am using Radix UI Themes in my app, and I'l like to be able to make some of the CSS variables it defines available in tailwind. For example, when I wrap my app in <Theme> from Radix themes, it defines a whole bunch of CSS variables at runtime like var(--accent-9) or var(--space-3), etc. These get computed from the settings I provide to the theme. For example, if I set <Theme accentColor='green'> then it will set all the accent color variables to be green. I'd like to be able to have a utility class in tailwind like bg-accent, that would compile to background-color: var(--accent-9). If I add @theme { --color-accent: var(--accent-9); } this doesn't work. There is no background color, and the class compiles to background-color: var(--color-bg-accent) which is undefined. In v3, I simply extended the colors in the tailwind.config.ts in theme.extend.colors and added accent: 'var(--accent-9)'. How can I do this in v4, for non-static CSS variables such as this?

[wongjn]

You can use @theme inline like:

@theme inline {
  --color-accent: var(--accent-9);
}

Which for bg-accent, would compile to:

.bg-accent {
  background-color: var(--accent-9);
}

[kamyarkaviani]

Thank you! This solved it for me.