Hacker News Reader

Comment by Liquidor | Hacker News Reader

I don't really use Tailwind. I enjoy my (S)CSS.

I took a look at https://daisyui.com/components/button/ and immediately I see classes that look similar to Bootstrap.

So my question is: Why build components on top of something like Tailwind instead of just regular CSS? Or are you able to customize and use Tailwind mixed in with the components? Then sure why not I guess.

Otherwise it feels like going full circle here.

View on HN

Yes, everything can be overridden with Tailwind classes (i.e. `btn p-8`). It's a great choice you're a Tailwind enjoyer, but want the batteries-included experience of Bootstrap.

As I see it, it's something like Bootstrap that's built on top of Tailwind which an architecturally valid approach in that it decomposes into clean layers. Personally I could see the appeal of Tailwind in how it encapsulates CSS into graphically meaningful classes, defining classes that are semantically meaningful out of those is a great idea.

Somebody who likes Tailwind would have an easy time specializing DaisyUI to look exactly like what they want. For that matter you could make Tailwind with DaisyUI easily. Their examples look great and I could totally see using DaisyUI instead of Bootstrap on my side projects, though my current ones have real back end problems that need solving and reworking the CSS isn't on the agenda any time soon.

I've been writing CSS manually since it came out. The latest additions make it less difficult, like & and nesting, variables, etc.

But overall, CSS is just really difficult to scale well properly. I should probably learn Tailwind at this point, instead of continually rolling my own CSS.

So now I have DaisyUI bookmarked since the site is excellent and looks so useful.

I've been writing CSS by hand since the late 90s. I resisted Tailwind for a long time, but I tried it on a pet project and I get it now. It doesn't fundamentally do anything that you can't do in CSS already, but it sort of "quantizes" the DX such that the vast majority of the CSS you'd usually end up writing boils down to a set of conventions.

You can still write your own CSS as needed (and probably should, for some of the more esoteric Tailwind cases), but stupid stuff like flexbox directives and padding/layout that you do literally everywhere become a lot easier, especially with things like the Tailwind VSCode plugin which provides autocomplete, reflection on defined variables, and linter errors for duplicated or incompatbile expressions.

Right but it comes after a long line of similar CSS frameworks with the same promise, starting with Bootstrap, and there were large movements about 10 years ago of whole orgs deserting those frameworks because of serious issues. Are you saying Tailwind somehow has resolved those? That was the main reason I didn't try to learn it considering it to be just yet another CSS framework's conventions.

Tailwind solves a somewhat different problem. It's maybe easiest to think of it as a bunch of aliases for writing inline styles. The fundamental problem with CSS at scale is leaky abstractions, right? Tailwind moves the abstractions down a level, so that rather than attaching semantic classes, you're just composing the properties of an element directly, except you don't have to remember if you used px or rem for this padding, or what the media query for a mobile breakpoint is. This tends to reduce the incidence of high-gravity classes which tend to accumulate features, at the cost of some verbosity vs something like Bootstrap, though it's significantly less verbose than equivalent inline styles would be.

“Do not remove a fence until you know why it was put up.”

Off topic, but is there a term for the opposite concept?

Something like "Decisions acquire a greater illusion of planning and deliberation the further into the past they were made".

Feels like assuming there is a reason can be just as damaging as assuming there isn't one.

Perhaps slightly related: https://en.wikipedia.org/wiki/Planck%27s_principle

Might be the survivorship bias. Or "history is written by the victor".

Hey don't blame Brett for where we ended up!

You can use mixed in tailwind. Its for consistency (which I quite like). I'm a big fan of just saying "gap-1" and knowing that that will be consistent across the custom components I've written, and the component library

Reply on news.ycombinator.com