Ring offset CSS variable does not work #19452
Description
What version of Tailwind CSS are you using?
v4.1.17
What build tool (or framework if it abstracts the build tool) are you using?
@rslib/core v0.18.0 (wrapping @rsbuild/core v1.6.7), using @tailwindcss/postcss v4.1.17
What version of Node.js are you using?
v25.2.1
What browser are you using?
N/A (Issue is with CSS generation/application)
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/NhfXz9PhUc
Describe your issue
I am attempting to use a CSS variable for the ring-offset utility using the arbitrary value syntax in Tailwind CSS v4, but it does not appear to apply the style.
I have a variable defined in my CSS within a @theme static block:
@theme static {
--ring-offset-slider: var(--spacing-050);
}I am trying to use this variable in a class string:
// Attempt 1 (Tailwind v4 variable syntax)
className="focus-visible:ring-offset-(--ring-offset-slider)"
// Attempt 2 (Arbitrary value syntax)
className="focus-visible:ring-offset-[var(--ring-offset-slider)]"Neither of these result in the expected ring-offset-width being applied. However, using a hardcoded value works correctly:
// Works
className="focus-visible:ring-offset-2"I expected focus-visible:ring-offset-(--ring-offset-slider) to generate the equivalent of ring-offset-width: var(--ring-offset-slider) (or the corresponding implementation in v4), but it seems to be ignored or invalid.