Tailwind Seems Nuts Until You Try It

Tailwind makes a complete mess out of your HTML. When you first try to do anything, it seems completely wrong. It feels like just a fancy style attribute.

But maybe all we needed was fancy style attribute after all.

I just finished rewriting the HTML for App-o-Mat‘s home page. I still have a lot to do, but the benefits are obvious:

  1. There is no CSS file (well not one that I write or maintain)
  2. My HTML structure is a lot simpler
  3. My site is in Django, so I have lots of ways to generate HTML partials and components
  4. The default behavior is very responsive and I can easily override what I need to
  5. It is trivial to debug in the browser inspector (the style is in the tag)
  6. They have thought of complex use cases like the typography plugin that can style markdown-generated HTML that you don’t control

Tailwind is the kind of thing that is more obvious if you’ve worked on bigger projects. The arbitrary class names, the disorganization, not knowing which class is bringing in which behavior, the chance that you mess up some other page that is sharing the class—that’s all solved with Tailwind.

The drawback (insane class attributes) is easily solved with the way we normally generate HTML in real projects.

It’s only day two, but it does feel to me like this makes more sense than Material (which is what I have been using for UI in my React projects). It will depend on how good the controls in TailwindUI are and if I can find what I need elsewhere.