-
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
Using a prefix with @apply breaks arbitrary values in numerous ways #8175
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Reporting this issue on behalf of myself and @isaacchong1
What version of Tailwind CSS are you using?
3.0.24
What build tool (or framework if it abstracts the build tool) are you using?
This bug occurs in the Tailwind CLI, via postcss, on Tailwind Play. I believe this bug happens everywhere.
What version of Node.js are you using?
16.14.0
What browser are you using?
Issue is browser independent, but I'm using: Brave Version 1.36.116 Chromium: 99.0.4844.74 (Official Build) (64-bit)
What operating system are you using?
Pop_OS!
Reproduction URL
https://play.tailwindcss.com/WQ2sVWOAqj?file=css
Describe your issue
As the title says, using a prefix seems to break css generation in many ways. I've found many different cases where this breaks. I documented some of them in the reproduction URL above, but they all seem to be caused by the combination of a prefix,
@apply
, and using arbitrary values. See examples below:Note: For all of these examples, I'm using the prefix "@", but I've tried other prefixes (like "a") and it breaks in the exact same way.
Transition with a single value works:
Result:
Transition with multiple values breaks:
Result: (note that there's no class name anymore)
Multiple box shadows:
Result:
ERROR: Cannot read properties of undefined (reading 'filter')
The text was updated successfully, but these errors were encountered: