Ring offset CSS variable does not work #19453
Replies: 2 comments
-
📝 CodeRabbit Plan ModeGenerate an implementation plan and prompts that you can use with your favorite coding agent.
🔗 Similar IssuesPossible Duplicates Related Issues
🔗 Related PRs#19348 - Improve compatibility with special default values in JS configs [merged] 👤 Suggested Assignees🧪 Issue enrichment is currently in early access.To disable automatic issue enrichment, add the following to your issue_enrichment:
auto_enrich:
enabled: false💬 Have feedback or questions? Drop into our discord or schedule a call! |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
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-offsetutility 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 staticblock:I am trying to use this variable in a class string:
Neither of these result in the expected
ring-offset-widthbeing applied. However, using a hardcoded value works correctly:I expected
focus-visible:ring-offset-(--ring-offset-slider)to generate the equivalent ofring-offset-width: var(--ring-offset-slider)(or the corresponding implementation in v4), but it seems to be ignored or invalid.Beta Was this translation helpful? Give feedback.
All reactions