Hacker News Reader

Comment by siquick | Hacker News Reader

> And have you had to work on hundreds of components that you had to refactor before? It's a write only language.

Once you know the syntax of Tailwind you can jump into any codebase and instantly know what’s going on. With “standard” CSS you’re forever jumping between components and class definitions.

View on HN

Once you know the syntax of CSS properties you can jump into any codebase and instantly know what’s going on. With Tailwind you’re forever jumping between components and figuring out what that one long line of class names is actually doing.

Yeah, Tailwind feels like Bash for CSS: save a few keystrokes here and there, at the cost of readability.

The problem is, everybody already knows Bash. Tailwind? Not so much.

> everybody already knows Bash

Highly doubt it.

> at the cost of readability.

You mean the readability of "p-2 bg-red-500 text-lg font-medium" or "i-dont-remember-what-this-class-does"?

I'd argue the readability in Tailwind is better. Tailwind is highly indicative of what it does and doesn't waste time when it comes to consistency.

The only real argument is that it adds extra length to the class attribute, but then again, it doesn't cause issues like finding the same class in 50 different CSS files or not having any auto-completion.

> You mean the readability of "p-2 bg-red-500 text-lg font-medium" or "i-dont-remember-what-this-class-does"

No, I'm pretty sure he means the readability of "absolute bottom-0 text-sm md:text-base text-white leading-relaxed tracking-tighter transition-all duration-300 ease-in-out m-3 md:m-4 px-6 md:px-8 py-4 md:py-6 opacity-0 w-full", as opposed to a single well-named class such as "image-caption".

Well at least I won't have to have 2 split windows just to know what 'image-caption' is and the tailwind class you wrote, perfectly readable and understandable.

If long class names aren't your thing, then sure, use CSS, but I'd rather save time and have understandable code than maintain those CSS classes like "image-caption".

If you're writing only once, sure, have as long class names as you want, since you yourself don't want to maintain your code in the future apparently.

> since you yourself don't want to maintain your code in the future apparently.

Well, I don't appreciate the snarky comment, quite honestly. But okay, I'll assume you have had more experience than me, and you've managed things I haven't, have a good day.

> Well at least I won't have to have 2 split windows just to know what 'image-caption' is

> I'd rather save time and have understandable code than maintain those CSS classes like "image-caption".

Sorry, but the snarkiness was in your comment first, and when you said you didn't want to maintain those classes, that's exactly what it sounded like to me, that, well, you didn't want to maintain said code. If you had a different point I'd be happy to hear it.

Yeah, it's bgcolor="#30312c" all over again. (One thing I like about Tailwind though is that at least it enforces some kind of grid and design tokens, but you can (and should!) easily reproduce it with CSS variables.)

> With Tailwind you’re forever jumping between components and figuring out what that one long line of class names is actually doing.

Only if you already have no clue what CSS is. If you know CSS and can’t figure out what a given tailwind class does, then I don’t know if anyone can help you.

That said, I do often feel that I might as well just write the css directly. Writing tailwind feels like another translation layer.

Your last paragraph is precisely what my point is. I simply don't understand why people like the indirection. Sure, it feels amazing to clap together a few classes and not have to think about naming them, until you later find that you don't know what the hell a given div is and have to spend a bunch of time parsing the one long line of Tailwind classes. If you try grouping the Tailwind classes using @apply for readability, congratulations, you have reinvented CSS classes, except with a DSL on top.

When I come back to a bit of code I haven't looked at for a long time, I find the class names I set on the individual elements extremely helpful, like comments that never go out of date. I can immediately orient myself and know which classes to look at (I use scoped/namespaced classes; not like BEM which is too dependent on HTML structure, just a namespace with the element class, like .Banner-icon).

I've never fully committed to TailwindCSS, but I have tried out my own utility classes on a smaller scale, and I found myself having to parse the entirety of the code to figure out what was going on.

My preference now is a mix of utility classes for super basic things that would be tedious to set a class on, and custom classes for everything else. Especially if media queries are involved, because good lord is that ever tedious to do with utility classes. If I find myself setting more than 2-3 utility classes on an element, I usually end up moving that to a CSS class for one reason or another. I don't define the utility classes until I need them, and I really don't use very many.

That's a good way to do it personally, and I might start taking that approach too. The Tailwind syntax for some of the more complex stuff is appalling.

One of my most-used utility class is "reset". Default styles are great, but they often get in the way, so I'll throw this on an element whenever I want to start from a blank slate, alongside other utility classes or a custom class. This can significantly cut down on the length of my CSS files, as well as make them much less brittle and less dependent on the HTML structure, because I don't need to repeatedly undo default styles in every rule I write. My scoped CSS files are typically under 100 lines, even for somewhat complicated things.

  .reset {
     display: inline;
     appearance: none;
     font: inherit;
     border: none;
     border-radius: 0;
     margin: 0;
     padding: 0;
     color: inherit;
     background: none;
     list-style: none;
     text-align: inherit;
     user-select: inherit;
  }

This is defined first in my CSS index file, so that any other classes will override it.

(Note that there's probably a better way of writing this rule. This is just something that evolved organically.)

That’s pretty much what tailwind does without any boilerplate.

No, Tailwind erases pretty much all browser styles automatically. I use my "reset" class far more selectively, and there's no boilerplate involved.

No, one is a restricted subset of the other, and that means you can better reason about a less expressive language. This is basically what you would have with a non-Turing complete language vs Turing complete one.

Subsets and DSLs can often be worse than the language they're supposed to replace, and moreover, you need to learn a new proprietary language on top of that. There is no need for me to write Tailwind classes when I can just write their equivalent properties in CSS instead.

Reply on news.ycombinator.com