Hacker News Reader

Comment by grayhatter | Hacker News Reader

> Want a button? Here's all you need:

> <button class="bg-sky-500 hover:bg-sky-600 active:bg-sky-700 text-white px-4 py-2 rounded-lg">Click me</button>

So, I avoid modern webdev, because... reasons.... but is the argument here, really, that this is better than. <button>click me</button> with the default styling applied to button { ... } in style.css?

Follow up question, wasn't the point of css so that you didn't have to write excessive html like this?

View on HN

To your first question: For me, yes. Although, If I’m going to use it in multiple places with that same style, I’d find the best way to declare it once (like in a React component). Generally I much prefer to keep the style close to the element it’s styling, and I’d rather it be done declaratively rather than native CSS with polyfills. CSS is such a core part of appearance and behavior that building and debugging structures and style together is much more effective.

CSS is declarative already!

Tailwind also doesn’t polyfill.

It uses CSS variables (custom properties) extensively. Which you can also do with just CSS.

Defining properties locally is a legit preference, but you can also use CSS for this.

Apologies, I meant browser normalization, not polyfill. Go my terms mixed up. I also appreciate Tailwind’s pre-built sizings and quick ways to define breakpoint-base styling at the element level. That said, if you want absolute control rather than convenience, then Tailwind can be more of a hindrance than a help. I would rather not manage a lot of that myself for most of my projects.

When using component frameworks like React, you typically put the styling for a button in the button component, and use that component. So then you don't need to have a global CSS class for a button. You just need to style the button once in the component.

But with the @apply function it's also still possible to create a new CSS class that combines other Tailwind attributes. That is sometimes useful for within a single component that uses the same styling for multiple elements.

.common-style { @apply flex w-4 h-3 bg-green; }

https://tailwindcss.com/docs/functions-and-directives#apply-...

Reply on news.ycombinator.com