Hacker News Reader

Comment by anaganisk | Hacker News Reader

I don't think that's true, just by importing the tailwind u add more bytes than plain css which you will end up writing.

View on HN

Pretty sure tailwind has had the option to have the minimal CSS generated on-demand from the set of classes you actually use, for a year or so.

I haven't actually tried using this feature yet though (haven't had time to upgrade tailwind in the project where I've been using it). I suspect writing your CSS by hand could still be more efficient in per-byte output, but not enough to justify the productivity loss from not using tailwind

Someone can fact check me, I'm going off memory: I believe in v1 Tailwind (before they added the "JIT" compilation) when you were in dev mode it just had all the classes available at all times, and then added a step to the prod build where it would purge unused classes from the CSS.

Now Tailwind scans for which classes are used as you add them and builds an output from that. So if you only used `m-auto` the only CSS it would output in the final build is

    .m-auto {
        margin: auto;
    }

Yes it does. You tell the compiler where your html lives and it keeps only the classes that you've actually used. This can be enhanced with a safelist of classes that might be generated by code. So you give it a regex to keep, for instance "all grid classes".

In development I like to generate ALL classes that are possibly available because it allows me to play around in the inspector and everything is available. But tailwind has that workflow in mind too with with Just-In-Time compilation. (I still prefer my way)

Anyhow, on a production site that I work on the final file size is 316KB (35kb gzipped). With a bit of tweaking the config I could get that down to around 250kb.

Reply on news.ycombinator.com