-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Arbitrary CSS variable with variant prefix #11241
Comments
@zipper Instead of using the [] syntax to specify an arbitrary value, you can use the var(--) syntax instead. For example, instead of using md:[--bar:theme('spacing[2.5]')], you can use md:var(--bar, theme('spacing[2.5]')). |
Also reproduced it: https://play.tailwindcss.com/jJkDkENm1o In the generated CSS there is a selector missing from a CSS rule: .\[--space\:theme\(spacing\.20\)\] {
--space: 5rem;
}
.\[--space\:theme\(spacing\[20\]\)\] {
--space: 5rem;
}
.hover\:\[--space\:theme\(spacing\.10\)\]:hover {
--space: 2.5rem;
}
{
--space: 2.5rem;
} |
https://play.tailwindcss.com/k2Eu5JVprh - a simple example to reproduce the problem. The media expression is output without a selector. |
A leading square bracket So while these seem to work in browsers, they will fail in many css parsers
Which I discovered the hard way... |
@atavistock Why not? The class must begin with |
@Serator Yeah, I spoke prematurely. I was looking more carefully through the CSS spec and it does seem like a leading |
Hey, thank you for this bug report! 🙏 This should be fixed by #11709, and will be available in the next release. You can already try it by using the insiders build |
What version of Tailwind CSS are you using?
3.3.2
What build tool (or framework if it abstracts the build tool) are you using?
Not sure, simulated on Tailwind Play though.
What version of Node.js are you using?
See above.
What browser are you using?
Doesn't matter.
What operating system are you using?
Doesn't matter.
Reproduction URL
https://play.tailwindcss.com/uGZbOX6jll
Describe your issue
When using arbitrary CSS variables as seen in docs https://tailwindcss.com/docs/adding-custom-styles#arbitrary-properties, there is an issue when:
[]
to retrieve value.E.g. these classes does work properly
✔️
[--bar:theme('spacing[1.5]')]
- even though[]
is used, it still works because there is no variant.✔️
md:[--foo:theme('spacing.2')]
- variant is used, but dot notation for value.But this one doesn't:
❌
md:[--bar:theme('spacing[2.5]')]
-[]
and variant is used together, resulting in malformed CSS output.All three classes are used in demo above, where first two works as intended, but the last one does not.
The text was updated successfully, but these errors were encountered: