Hacker News Reader

Comment by shubhamjain | Hacker News Reader

> Using CSS does not give you that. I don't even address the "learn to use CSS" phrase because anyone who uses Tailwind obviously knows CSS! We do the translation back and forth in our head as necessary.

While I agree, sometimes I feel Tailwind users forget that writing regular CSS is also an option. I have seen examples where developers repeat Tailwind classes for every paragraph, every link. They repeat same typography styles over and over again instead of creating some base CSS. A great example is this checkbox[1] where developers used 71 Tailwind classes to style the input.

[1]: https://twitter.com/hovhaDovah/status/1461672155108806658

View on HN

I think Tailwind only shines alongside a component system like React where you can just create a new Paragraph tag and reuse that. It makes me very happy because in the end there's way less code for me to read and understand, and changes are obvious, immediate and easy to do.

Tailwind is moderately useful but not the panacea people are looking for or they’re being told.

I style things normally in CSS with exceptions or one-offs that are styled in tailwind classes. Usually try to avoid those.

By "base CSS" are you referring to using @apply? That's generally not recommended from what I understand, with componentization and reuse being preferred over most usages of @apply for this purpose.

Re `@apply`, that's correct, per Adam Wathan himself[0]:

> Confession: The `apply` feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework

> You should almost never use it

> Reuse your utility-littered HTML instead.

[0]: https://twitter.com/adamwathan/status/1226511611592085504

I feel us programmers should be open to breaking rules in favor of convenience. I don't see an issue to why you can't use `p:not(:first-child) { margin-top: 12px; }` just because you're using Tailwind (that particular rule gives a margin to every paragraph except the first one which is usually needed in articles). The most productive programmers I have seen frequently disregarded best practices if it suited the situation.

You mean like this supported utility class `[&_p:not(:first-child)]:mt-[12px]`?

I tried to avoid using @apply but that makes creating variations (e.g. of button styles) REALLY hard — as your code is just littered with class names. Plus if you're adding :active :hover and :focus styles, you have to do it on ALL the variations on all of the pages. It's frustrating and takes a really long time.

I've moved to using @apply in a few generalized classes and I love it, since my class names like "btn" "btn-success" "btn-success-outline" describes what I want, and I can easily go in and change them.

I'm not creating a new component for every tiny thing, like a button or a link, just so I can avoid using @apply...

Reply on news.ycombinator.com