4 ms·

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

by 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
      > 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?
    - pier25 2y ago
      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.

by wruza 2y ago

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
    > 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?
  - pier25 2y ago
    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.