3 ms·

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

by bradgessler 2y ago

0x073 2y ago
That's madness. "instead of writing 100 class names" "use semantic class names" What a loop.
- bradgessler 2y ago
  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.
  - albert_e 2y ago
    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--with-visual-elements https://react.daisyui.com/?path=/story/data-display-table--w... [2] https://daisyui.com/resources/videos/react-ui-design-mastery-integrating-daisyui-tailwind-css-for-stunning-interfaces-8vwaj4chdok/ https://daisyui.com/resources/videos/react-ui-design-mastery... [3] https://github.com/daisyui/react-daisyui https://github.com/daisyui/react-daisyui
wruza 2y ago
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.
- JoeOfTexas 2y ago
  Bootstrap ?
  - sergiotapia 2y ago
    he's joking
- csomar 2y ago
  No one missed anything. Most people now are using React with Tailwind, so their code is essentially <Button>React Button</Button>
  - pier25 2y ago
    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.
    - csomar 2y ago
      > 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.
      - wruza 2y ago
        Is this specific to react?
      - xigoi 2y ago
albert_e 2y ago
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?

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

0x073 2y ago

That's madness. "instead of writing 100 class names" "use semantic class names" What a loop.

bradgessler 2y ago
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.
- albert_e 2y ago
  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--with-visual-elements https://react.daisyui.com/?path=/story/data-display-table--w... [2] https://daisyui.com/resources/videos/react-ui-design-mastery-integrating-daisyui-tailwind-css-for-stunning-interfaces-8vwaj4chdok/ https://daisyui.com/resources/videos/react-ui-design-mastery... [3] https://github.com/daisyui/react-daisyui https://github.com/daisyui/react-daisyui

wruza 2y ago

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.

JoeOfTexas 2y ago
Bootstrap ?
- sergiotapia 2y ago
  he's joking
csomar 2y ago
No one missed anything. Most people now are using React with Tailwind, so their code is essentially <Button>React Button</Button>
- pier25 2y ago
  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.
  - csomar 2y ago
    > 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.
    - wruza 2y ago
      Is this specific to react?
    - xigoi 2y ago

albert_e 2y ago

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?