[v3 on Tailwind Play] using a class with a variant generates css for the variant-free class too

[olets]

What version of Tailwind CSS are you using?

3.4.11

What build tool (or framework if it abstracts the build tool) are you using?

play's

What version of Node.js are you using?

play's

What browser are you using?

Chrome, Firefox

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/KnbS12ekWQ

Describe your issue

Given the html pseudocode <div class="variant:utility">, Tailwind is generating the CSS for .variant\:utility and the CSS for .utility.

[Anne165Hernadez]

Hello! It looks like you’re encountering an issue with Tailwind CSS where it’s generating CSS for both .variant\:utility and .utility from the class variant:utility. This might be due to how Tailwind’s JIT (Just-In-Time) mode processes the classes. To resolve this, ensure your tailwind.config.js is correctly set up and that there are no conflicting configurations. Make sure you’re using the latest version of Tailwind CSS, as bugs are often fixed in newer releases. If you aren’t already, try enabling JIT mode in your Tailwind configuration, as this can sometimes resolve issues with class generation. Additionally, ensure that you are correctly escaping special characters in your class names, for example, using variant\:utility instead of variant:utility. If the issue persists, check the Tailwind CSS GitHub repository for similar issues or open a new issue with your specific details.

[adamwathan]

Hey thanks! Just looked into this and it doesn't seem to happen in real projects, only in Tailwind Play. Will keep this open so we don't forget to fix it in Play but in my testing at least only the actual classes are generated in real projects 👍

[olets]

Thanks confirming that with this stackblitz https://stackblitz.com/edit/tailwindcss-issues-14401?file=src%2Foutput.css&terminal=dev