Hacker News Reader

Comment by bradgessler | Hacker News Reader

I switched all my Bulma sites to https://daisyui.com/ since it works with Tailwind.

instead of writing 100 class names For every element, every page, every project, again and again…

  <button class="bg-indigo-600 px-4 py-3 text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-i">
    Tailwind Button
  </button>

use semantic class names sunglasses emoji

  <button class="btn btn-primary">
    daisyUI Button
  </button>

Heck, how did we miss that for almost three decades? That's my favorite style now.

Bootstrap ?

he's joking

No one missed anything. Most people now are using React with Tailwind, so their code is essentially

   <Button>React Button</Button>

How is this a good thing?

You now need the extra JS from that <Button> component to encapsulate the HTML with TW classes.

Plus all the overhead from TW itself. You need a ton of classes to essentially replicate inline styles.

Plus all the CPU needed to parse and execute all that extra JS and CSS code.

I get that some people prefer this workflow and that's fine, everyone has preferences. But arguing this is better than sending an HTML tag with a couple of classes is absurd.

> You need a ton of classes to essentially replicate inline styles.

This works better for optimization because you reuse classes. End developer doesn't care. Designers use Storybook to keep track of the components.

> But arguing this is better than sending an HTML tag with a couple of classes is absurd.

If you compile/SSR your React, the end user will get an HTML tag with classes.

Is this specific to react?

> If you compile/SSR your React, the end user will get an HTML tag with classes.

Isn’t that just semantic HTML with extra steps?

With Bulma/Bootstrap you're also reusing classes but you just need a fracion of those compared to TW. I don't know the ratio but I would imagine it's something like 1:10.

And when using TW with SSR you're still sending all those extra classes per element.

That's madness.

"instead of writing 100 class names"

"use semantic class names"

What a loop.

In practice DaisyUI makes it easy for people who use Tailwind to quickly build prototype UIs. Later they can go back and replace the DaisyUI classes with Tailwind.

In less words, if you can’t stand Tailwind then DaisyUI is not for you.

Is this really the main use case?

The product website seems to suggest we can add DaisyUI to a React project -- and proceed with development with no additional notes on replacing the styles later before production

[1] https://react.daisyui.com/?path=/story/data-display-table--w...

[2] https://daisyui.com/resources/videos/react-ui-design-mastery...

[3] https://github.com/daisyui/react-daisyui

Looks very interesting and useful.

I am looking to create a reusable React template for a lot of POc /mockup/ demo websites - was thinking of using react-bootstrap so I can use components from bootstrap and apply bootstrap themes for the styling and colors.

Any advice on better choices today for this use case?

Reply on news.ycombinator.com