Hacker News Reader

Comment by Raymonf | Hacker News Reader

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.

View on HN

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