6 ms·

I've used a lot of tools for writing "CSS" over the years: pure CSS, CSS modules, SASS, LESS, BEM,... I think when using Tailwind, you have to know the "real" C

I've used a lot of tools for writing "CSS" over the years: pure CSS, CSS modules, SASS, LESS, BEM,... I think when using Tailwind, you have to know the "real" CSS anyway, but the most important thing that Tailwind offers is the consistency. So you need 1-unit padding? `p-1`. Double that? `p-2`. Still not enough? `p-3`. More? `p-4`. I don't have to think and do math in my head like 0.25rem, 0.5rem, 1rem,... and IMHO, it's a big enough win for me to keep using Tailwind CSS. The features that were introduced in recent versions are just about supporting more CSS features to be more complete and not about feature-bloat.

klysm 4y ago
I get that same exact property with css-in-js. All my components have a p prop and an m prop
- thangngoc89 4y ago
  I'm not sure about libraries that could compile and extract to static css like linaria, but Tailwind is 100% compile time only, all CSS are generated and there isn't any runtime overhead.
waboremo 4y ago
That doesn't seem like a big enough win when CSS variables exist and offer far more readable options (as you're the one naming them). On that front, I reckon majority of Tailwind developers use far fewer variables than they believe, so it's not some gigantic monumental task where you have to set up a million different CSS variables. This is the problem with Tailwind, it doesn't offer enough nor does it move faster than CSS to justify its existence. The only real use case for it seems to be solo developers that do not have the time or resources to set up their own baseline set of variables, or those that use it with a component library that's based on TW.
- dawnerd 4y ago
  I think you need a reality check on who actually uses Tailwind. Very large cops and sites use it because it improves the dev exp and increases performance through smaller file sizes. Further I’m not sure what you mean about not moving fast enough, they just added container queries.
  - waboremo 4y ago
    Yes, and you'll find many of those very large corps are questioning why they're using it now. Which is a great thing, many businesses should be in constant reevaluation of why they rely on certain tooling. Personally doubt the better performance, I have yet to see a case where that is true unless they were comparing it unevenly to some behemoth like Styled-Components. When you compare it to SASS the performance difference ceases to exist. Same with "improves the dev exp", I don't see how this is the case at all especially when you have to install an additional extension to get full proper support in your IDE of choice. You are still working with variables, if you are on a tiny team/solo, it makes sense to use Tailwind defaults but on a large team where your design team should be creating their own? What use does Tailwind have then when the utility classes are just going to be overwritten? You're still creating the components yourself.
  - ricardobeat 4y ago
    I suggest you double check those performance claims. The CSS might be smallish, but you're usually moving the weight to non-cached HTML which is re-downloaded on every page view. I helped analyze the impact on a very large website (billion+ pageviews) and it did not look very good.
    - johnchristopher 4y ago
      What you are saying is: "tailwind class names are cumulative and so verbosein the HTML tag that it negates the benefits of smaller CSS and eat the bytes saved?". Am I reading that right ?
      - wiredearp 4y ago
        Well if you CSS can be loaded once and then cached: .button { background-color: blue; color: white; padding: 0.5rem 0.75rem; border-radius: 0.25rem; } Then the browser will need to download less bytes: <button class="button">Click</button> Compared to: <button class="bg-blue text-white px-3 py-2 rounded-sm">Click</button> And this does make a difference when your entire layout is done with Tailwind. Consider that the HTML, unlike the CSS, might typically not be cached, and that the server is now also charged with emitting higher loads of data. Consider also that all these utility classes are all loaded in the CSS on the front page even if some or most of them is used on everything except the front page. The performance win is not as unquestionable as Tailwind would like to suggest.
csande17 4y ago
Funny, I had the exact opposite experience using Tailwind: my design tools gave me measurements in pixels or rems, and I had to do math to convert them into Tailwind units.
hypertele-Xii 4y ago
> I don't have to think and do math in my head Imagine being a computer programmer and not thinking nor doing math in your head. Good thing there are other people to do the thinking and math for you, huh? Because the multiplication table for 0.25 is too complicated... Next you'll need an enterprise-grade library for adding numbers together. Because sums are hard, man. Who's got time to remember what 1+1 is?

klysm 4y ago

I get that same exact property with css-in-js. All my components have a p prop and an m prop

thangngoc89 4y ago
I'm not sure about libraries that could compile and extract to static css like linaria, but Tailwind is 100% compile time only, all CSS are generated and there isn't any runtime overhead.

waboremo 4y ago

That doesn't seem like a big enough win when CSS variables exist and offer far more readable options (as you're the one naming them). On that front, I reckon majority of Tailwind developers use far fewer variables than they believe, so it's not some gigantic monumental task where you have to set up a million different CSS variables. This is the problem with Tailwind, it doesn't offer enough nor does it move faster than CSS to justify its existence. The only real use case for it seems to be solo developers that do not have the time or resources to set up their own baseline set of variables, or those that use it with a component library that's based on TW.

dawnerd 4y ago
I think you need a reality check on who actually uses Tailwind. Very large cops and sites use it because it improves the dev exp and increases performance through smaller file sizes. Further I’m not sure what you mean about not moving fast enough, they just added container queries.
- waboremo 4y ago
  Yes, and you'll find many of those very large corps are questioning why they're using it now. Which is a great thing, many businesses should be in constant reevaluation of why they rely on certain tooling. Personally doubt the better performance, I have yet to see a case where that is true unless they were comparing it unevenly to some behemoth like Styled-Components. When you compare it to SASS the performance difference ceases to exist. Same with "improves the dev exp", I don't see how this is the case at all especially when you have to install an additional extension to get full proper support in your IDE of choice. You are still working with variables, if you are on a tiny team/solo, it makes sense to use Tailwind defaults but on a large team where your design team should be creating their own? What use does Tailwind have then when the utility classes are just going to be overwritten? You're still creating the components yourself.
- ricardobeat 4y ago
  I suggest you double check those performance claims. The CSS might be smallish, but you're usually moving the weight to non-cached HTML which is re-downloaded on every page view. I helped analyze the impact on a very large website (billion+ pageviews) and it did not look very good.
  - johnchristopher 4y ago
    What you are saying is: "tailwind class names are cumulative and so verbosein the HTML tag that it negates the benefits of smaller CSS and eat the bytes saved?". Am I reading that right ?
    - wiredearp 4y ago
      Well if you CSS can be loaded once and then cached: .button { background-color: blue; color: white; padding: 0.5rem 0.75rem; border-radius: 0.25rem; } Then the browser will need to download less bytes: <button class="button">Click</button> Compared to: <button class="bg-blue text-white px-3 py-2 rounded-sm">Click</button> And this does make a difference when your entire layout is done with Tailwind. Consider that the HTML, unlike the CSS, might typically not be cached, and that the server is now also charged with emitting higher loads of data. Consider also that all these utility classes are all loaded in the CSS on the front page even if some or most of them is used on everything except the front page. The performance win is not as unquestionable as Tailwind would like to suggest.

csande17 4y ago

Funny, I had the exact opposite experience using Tailwind: my design tools gave me measurements in pixels or rems, and I had to do math to convert them into Tailwind units.

hypertele-Xii 4y ago

> I don't have to think and do math in my head Imagine being a computer programmer and not thinking nor doing math in your head. Good thing there are other people to do the thinking and math for you, huh? Because the multiplication table for 0.25 is too complicated... Next you'll need an enterprise-grade library for adding numbers together. Because sums are hard, man. Who's got time to remember what 1+1 is?