I'm working on an Angular 15 app, and looking into integrating Tailwind 3 into it.
First of all, I'm not a huge fan of "utility-first" css libs, but I do see some use cases where it could come in handy. Mostly to standardise all of the responsiveness, flex and spacing classes. Maybe a few other utils here and there, but most of the other Tailwind stuff, I don't need. I know this is not Tailwinds "best practice", but I strongly disagree with their "no custom CSS at all" philosophy.
The alternative, of course, is to write those utility CSS rules myself, and drop Tailwind completely. However, what got me interested in Tailwind is the ability to purge unused rules, which from what I understand is done with PurgeCSS. e.g. I don't want all the padding/margin combinations, when realistically the app won't use half of them.
However, what really surprised me was how poor this extraction logic is. Basically, it just runs a regex on the whole output, and if it finds any matches, it includes those CSS rules. It doesn't care if the match was actually done on the class attribute, or in plain text, or in the name of the component selector, or in JS code etc.
So, e.g. if you have this somewhere in your html:
<div>This is a container with visible border</div>
It will generate CSS rules for .container, .visible and .border, even though those have nothing to do with CSS classes. It's just plain text. On a large project this will result in a lot of Tailwind CSS rules creeping in, that aren't actually used.
I see a custom extract function can be provided in tailwind.config.js. Does anyone know of a good, tested, extract function that would handle this better, for Angular? Basically, I only want it to match if it's a real class, so: for class attributes, ngClass directive (all of it's variations) and HostBindings. Correct me if I missed something.
Btw. I know we can use a prefix to make it harder to match false positives, but I don't want to do that. We already use prefixes for our own components, and using the same one will result in false positive matches on component selectors. Also I don't want to "invent" some other meaningless prefix. I also know we can use a whitelist to include only the rules we want (since we don't plan to use the majority of them anyway), but that is still tedious to maintain.
So, the only reasonable solution seems to be a better, Angular-friendly, extract function.
