Hacker News Reader

Comment by ToJans | Hacker News Reader

Slightly OT: anyone can recommend a tool that turns the tailwind class mess into a properly structured CSS file (Grouping common utility classes etc).

I think I'd pay for this if it works properly...

View on HN

Just an example of code that drives me nuts:

                <button
                  type="button"
                  className={clsx(
                    checked ? "border-2 border-primary-800" : "",
                    "flex touch-none flex-col items-center justify-between rounded border border-gray-100 bg-white hover:border-2 hover:border-primary-800",
                  )}
                >

afaik Tailwind determine classes to produce at runtime. You are likely out of luck there, who would want to turn this into a compile time approach, would rather write a new css library.

That’s just to save space. You can actually produce a complete, static CSS file that contains every class. Also, the “dynamic” nature is almost as simple as a regex - you don’t have to do complex static analysis which of the branches are taken, etc, you just include every className and that’s it.

I didnt know the entire class set could be produced. Thanks for sharing

Reply on news.ycombinator.com