Colon separated class bindings in Vue does not generate the expected class

[Oskar-Nilsen-Roos]

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:

<div :class="{ invisible: hideClose }">
</div>

Will result in the following minified Javascript when built:

{class:l({invisible:e.hideClose})}

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:

<div :class="[hideClose ? 'invisible' : '']">
</div>

Giving you:

{class:l([e.hideClose?"invisible":""])}

Thanks!

[adamwathan]

Hey! What's the situation that's causing you to run Tailwind against minified JS instead of against the original source files?

[Oskar-Nilsen-Roos]

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 content prop in the tailwind config to the built js file of the application.

So one solution would definitely be to go against the source files, generate a components.css and then include that css with each application. However, this would cause a lot of css duplication on every single page.

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!