Half value class(f.e. p-0.5) automatically add same zero class(p-0)

[artur-demidov]

Tailwindcss 3.1.8
Engine: playground/vite + react
Describe: if you add a class for a half value, then the class of the zero value automatically goes into the bundle

[lzt1008]

yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g
//              ╰───────               ╰────────

I try to remove these dot here of defaultExtractor()
and solve this problem，but there are two tests failed: markdown and slim

I think we can provide some extension-specific extractor(html, md, tsx...) so we can also reduce the number of candidates to get some performance improvement

[thecrypticace]

Hey! So, at least for now, this behavior is an intentional side-effect of supporting both Slim and class lists in backticks (like used in markdown, for example) — which is why the tests pointed out by @lzt1008 fail.

Since Tailwind CSS does not parse your source files, at least when reading Slim files, .p-0.5 is ambiguous as it could could be either p-0.5 or p-0 and 5. So, for the purposes of Tailwind CSS, it is both. This results in a minor increase in file size for better flexibility and less need for configuration. If you want to adjust this for your own project we have documentation on how to customize the extraction logic.

It may be in the future that we'd provide more specific extractors but that even can be quite complicated because how syntax for different languages can be mixed. For instance, a pure HTML extractor may not pick up everything that would be needed inside <script> tags.

[eloyesp]

I understand it will be solved with the new parser, but if it is not, some alternative solutions would be:

• Use "," instead of ".": left-0,5 (already used on many languages)
• Use another dash: left-0-5
• Skip the ".": left-05 (that will not work for 1.5, but that one is less common).
• Use decimal fractions: left-5/10, left-15/10 (complex but mathematically correct)