Unable to set property value to "inherit" in the CSS config

[mwnciau]

What version of Tailwind CSS are you using?

v4.0.9

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

Elixir Phoenix using the Tailwind 0.3.1 elixir package, built using the esbuild 0.9.0 elixir package, which is using esbuild 0.17.11

What version of Node.js are you using?

v22.16.0

What browser are you using?

Firefox

What operating system are you using?

Ubuntu

Reproduction URL

https://play.tailwindcss.com/vJ8zniNWjT

Describe your issue

It is impossible to set a custom theme variable to "inherit" using a CSS config. See the Tailwind play link above where I introduce --gap-inherit: inherit. Because Tailwind is using CSS variables under the hood, the variable --gap-inherit consumes the "inherit" value so remains unset.

I was not able to find in the documentation whether a workaround for this exists.

[wongjn]

You could consider:

• Using the inline tag so that the inherit is used in the rule, rather than a CSS variable.
• Using an arbitrary value class.

https://play.tailwindcss.com/xvF6KdSvGv?file=css

[mwnciau]

Thank you. That was what I was looking for but couldn't find in the documentation.