-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
var()
is incorrectly wrapped around dashed idents with CSS scroll animations
#12205
Comments
Thanks for reporting, definitely a bug and will be interesting to figure out how we effectively solve for this because of the sounded-like-a-good-idea-but-clearly-wasn't automatic We'll definitely figure it out but as a temporary workaround you can add an underscore before the dashed ident and Tailwind will be too dumb to convert it to a https://play.tailwindcss.com/k2bdKI8TlB <div class="[timeline-scope:_--tl]">
<div class="[scroll-timeline:_--tl]">Scroller</div>
<div class="[animation-timeline:_--tl]">Element</div>
</div> |
Thanks for the underscore tip, I was trying to figure out a way to trick the compiler, but that was on thing I didn't try 😄 |
I've encountered the same issue today while trying to animate CSS vars. @adamwathan, while I see the benefits of having automatic Maybe a good middle ground would be to keep it only for custom values (e.g., |
@macarie Yeah I think that could be pretty sensible, agree it's a bit strange that if you pass a complete CSS declaration that we insert |
One solution I've implemented in #12236 is to not automatically inject the Only problem with this is that properties that expect a We can add these properties to the list as well, but this will result in a breaking changes 🤔 |
This should be fixed by #12236, 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?
For example: v3.3.3
What build tool (or framework if it abstracts the build tool) are you using?
Next.js 13.4.16
What version of Node.js are you using?
v20.6.1
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/mFflelRLYg
Describe your issue
I've been exploring using Tailwind with CSS scroll animations and I've noticed that Tailwind is incorrectly adding
var()
to specific keywords. For example, with this code:It is incorrectly setting the css properties like so:
When the intended and correct output should be:
MDN docs
The text was updated successfully, but these errors were encountered: