Hacker News Reader

Comment by btbuildem | Hacker News Reader

Ok, I'll guess I'll be the lone voice of dissent here. I don't like it. I think it goes against the concept of utility classes / functional CSS. As soon as you start making component-level classes, things begin to become opinionated and you lose the universality.

My understanding of the functional CSS approach was that you'd make a button component, and use the variety of "atomic" classes to style it. If you're using a "btn" class etc, it muddles the distinction of where the semantics live, and things get harder to reason about / debug.

View on HN

Absolutes are the problem. DaisyUI gives the flexibility of using Tailwind directly or higher level classes.

Tailwind is great but sometimes you end up having 10-15+ classes for basic components that makes the code harder to read and reason with.

We should have utility classes and composability, but relying on them exclusively is also not necessarily the best way either.

Can't you just use @apply to make a single uniform style that utilizes all those classes?

That's my understanding at least, like if you want to make a button, instead of have the same 10+ classes posted everywhere you make a new class with @apply and keep the styles uniform.

Then in the future if you need to change one of the core utilities it's also easily updated to all you the @apply classes you make.

Am I misunderstanding the purpose? I've only used tailwind twice.

yes you can use @apply. DaisyUI also supports @apply directives as well both for their own and tailwind clases.

However you have to use them yourself. With vanilla Tailwind there is no out of the box @apply directives already set you can use. Think of DaisyUI as basically a whole set of @applies someone already made for you.

For users new to frameworks with utility focus it can be less steep learning curve to experiment and all the out of the box abstractions can reduce the need for having your own.

Tailwind is supposed to be used with components. Often it's React/Vue/Web components, but CSS components with @apply, like you're doing, also work perfectly fine.

You're right, it isn't really utility/functional CSS - it's more akin to BEM [1] at this point. But having used both...I think it's pretty much six-of-one, half-dozen of another; you can write good or poor CSS both ways! :D

[1]: http://getbem.com/introduction/

Well, this is true, but to me this provides a set of good defaults instead of starting from scratch. I see this very useful for example for side projects, where I don't want to start from scratch on every experiment I do.

For a work project, I'd use just tailwind for the reasons you mention.

Reply on news.ycombinator.com