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
Colon separated class bindings in Vue does not generate the expected class #13492
Comments
Hey! What's the situation that's causing you to run Tailwind against minified JS instead of against the original source files? |
Right, should've clarified! In our use-case we have a Vue components library which is tree-shaken and then consumed by 10+ applications which make up individual fragments of a website (usually called micro frontends). We then generate the css files for each application as it's built, by pointing the So one solution would definitely be to go against the source files, generate a I understand that this is a niche issue, and probably not a way you intended for it to be used, so I don't expect you to change the code to suite this need! Can you see any other way to solve this while avoiding as much code duplication as possible? Or maybe come across someone solving using tailwind in a similar structure? Thank you! |
What version of Tailwind CSS are you using?
v3.4.3
What build tool (or framework if it abstracts the build tool) are you using?
--
What version of Node.js are you using?
--
What browser are you using?
N/A
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/JBhjflrJ2x
Describe your issue
Using a Vue class binding like so:
Will result in the following minified Javascript when built:
Any class not surrounded by double or single quotes, and separated by a colon on either side with a following value will not generate the expected tailwind class.
Expected result:
Generated 'invisible' class.
Actual result:
No 'invisible' class generated.
Simply surrounding the value in quotes would fix it in this case, however building the file will minify it away since it's not technically necessary.
Only current workaround I know of is not using a Vue class binding, and instead using a ternary operator or something similar, leaving you with quotes in the minified file:
Giving you:
Thanks!
The text was updated successfully, but these errors were encountered: