4 ms·

Tailwind is not an abstraction, it's shorthand. It saves you several bytes in the source, saves seconds of typing, and in return rewards you with a massive head

by tgv 4y ago

Tailwind is not an abstraction, it's shorthand. It saves you several bytes in the source, saves seconds of typing, and in return rewards you with a massive headache.

adhoc_slime 4y ago
I'm a tailwind fiend, ie I like tailwind, but I can say it won't save bytes in the source if you use it the way that the docs intend. Tailwind is not very DRY so you'll probably end up repeating classes in source resulting in extra bytes if you just used a custom class repeated on similar components.
- solumunus 4y ago
  But you can create custom classes using @apply. If you're doing that alongside using it in components then it's incredibly DRY and far more efficient than anything else I've ever used in the last 20 years.
  - candiddevmike 4y ago
    What's the difference between custom tailwind classes and... regular CSS?
    - gedy 4y ago
      Or Bootstrap, etc. This is why we didn't end up using TW for a large production app. It's really cool, but realized we were just ending up re-creating something like Bootstrap components using TW @apply.
    - verisimilidude 4y ago
      Not much. Tailwind's @apply just lets you apply Tailwind design tokens to CSS classes. It's useful for keeping designs looking consistent if you're already heavily invested in Tailwind. This is probably not much of an advantage unless you're working at a very large organization with many teams and web properties. And there are other CSS-native ways of enforcing design token consistency without Tailwind too. Open Props is a good example (https://open-props.style/ https://open-props.style/). @apply is also a great lazy way to just slap a string of Tailwind classes from mark-up into a class. It doesn't sound proper but it works in the context of iterative development.
    - solumunus 4y ago
      Once familiar, it's far quicker to read, write and reason about than raw CSS, in my experience.
  - adhoc_slime 4y ago
    Absolutely, I love @apply for this reason. But just look at tailwind's website, they don't exactly present this front and center, so I read their site as though they don't exactly prescribe the usage of @apply like you or I would. but tangentially to this, that's why I like tailwind, its really not all that prescriptive but a tool that speeds up my development un-equivocally more than Sass ever has.
- corobo 4y ago
  Isn't this negated by everything being zipped up in transit? The more you repeat yourself the better it compresses
  - adhoc_slime 4y ago
    Right but that isn't actually the source, which was the point that the parent commenter was making.
    - deleted 4y ago
      [deleted]
    - deleted 4y ago
      [deleted]
anaganisk 4y ago
I don't think that's true, just by importing the tailwind u add more bytes than plain css which you will end up writing.
- pcthrowaway 4y ago
  Pretty sure tailwind has had the option to have the minimal CSS generated on-demand from the set of classes you actually use, for a year or so. I haven't actually tried using this feature yet though (haven't had time to upgrade tailwind in the project where I've been using it). I suspect writing your CSS by hand could still be more efficient in per-byte output, but not enough to justify the productivity loss from not using tailwind
  - hbn 4y ago
    Someone can fact check me, I'm going off memory: I believe in v1 Tailwind (before they added the "JIT" compilation) when you were in dev mode it just had all the classes available at all times, and then added a step to the prod build where it would purge unused classes from the CSS. Now Tailwind scans for which classes are used as you add them and builds an output from that. So if you only used `m-auto` the only CSS it would output in the final build is .m-auto { margin: auto; }
  - jspash 4y ago
    Yes it does. You tell the compiler where your html lives and it keeps only the classes that you've actually used. This can be enhanced with a safelist of classes that might be generated by code. So you give it a regex to keep, for instance "all grid classes". In development I like to generate ALL classes that are possibly available because it allows me to play around in the inspector and everything is available. But tailwind has that workflow in mind too with with Just-In-Time compilation. (I still prefer my way) Anyhow, on a production site that I work on the final file size is 316KB (35kb gzipped). With a bit of tweaking the config I could get that down to around 250kb.
SkyPuncher 4y ago
Tailwind is amazing when paired with React. It completely avoids the need for a parallel, poorly coupled, poorly scoped CSS file (or whatever flavor of CSS you're using).

by tgv 4y ago

Tailwind is not an abstraction, it's shorthand. It saves you several bytes in the source, saves seconds of typing, and in return rewards you with a massive headache.

adhoc_slime 4y ago

I'm a tailwind fiend, ie I like tailwind, but I can say it won't save bytes in the source if you use it the way that the docs intend. Tailwind is not very DRY so you'll probably end up repeating classes in source resulting in extra bytes if you just used a custom class repeated on similar components.

solumunus 4y ago
But you can create custom classes using @apply. If you're doing that alongside using it in components then it's incredibly DRY and far more efficient than anything else I've ever used in the last 20 years.
- candiddevmike 4y ago
  What's the difference between custom tailwind classes and... regular CSS?
  - gedy 4y ago
    Or Bootstrap, etc. This is why we didn't end up using TW for a large production app. It's really cool, but realized we were just ending up re-creating something like Bootstrap components using TW @apply.
  - verisimilidude 4y ago
    Not much. Tailwind's @apply just lets you apply Tailwind design tokens to CSS classes. It's useful for keeping designs looking consistent if you're already heavily invested in Tailwind. This is probably not much of an advantage unless you're working at a very large organization with many teams and web properties. And there are other CSS-native ways of enforcing design token consistency without Tailwind too. Open Props is a good example (https://open-props.style/ https://open-props.style/). @apply is also a great lazy way to just slap a string of Tailwind classes from mark-up into a class. It doesn't sound proper but it works in the context of iterative development.
  - solumunus 4y ago
    Once familiar, it's far quicker to read, write and reason about than raw CSS, in my experience.
- adhoc_slime 4y ago
  Absolutely, I love @apply for this reason. But just look at tailwind's website, they don't exactly present this front and center, so I read their site as though they don't exactly prescribe the usage of @apply like you or I would. but tangentially to this, that's why I like tailwind, its really not all that prescriptive but a tool that speeds up my development un-equivocally more than Sass ever has.
corobo 4y ago
Isn't this negated by everything being zipped up in transit? The more you repeat yourself the better it compresses
- adhoc_slime 4y ago
  Right but that isn't actually the source, which was the point that the parent commenter was making.
  - deleted 4y ago
    [deleted]
  - deleted 4y ago
    [deleted]

anaganisk 4y ago

I don't think that's true, just by importing the tailwind u add more bytes than plain css which you will end up writing.

pcthrowaway 4y ago
Pretty sure tailwind has had the option to have the minimal CSS generated on-demand from the set of classes you actually use, for a year or so. I haven't actually tried using this feature yet though (haven't had time to upgrade tailwind in the project where I've been using it). I suspect writing your CSS by hand could still be more efficient in per-byte output, but not enough to justify the productivity loss from not using tailwind
- hbn 4y ago
  Someone can fact check me, I'm going off memory: I believe in v1 Tailwind (before they added the "JIT" compilation) when you were in dev mode it just had all the classes available at all times, and then added a step to the prod build where it would purge unused classes from the CSS. Now Tailwind scans for which classes are used as you add them and builds an output from that. So if you only used `m-auto` the only CSS it would output in the final build is .m-auto { margin: auto; }
- jspash 4y ago
  Yes it does. You tell the compiler where your html lives and it keeps only the classes that you've actually used. This can be enhanced with a safelist of classes that might be generated by code. So you give it a regex to keep, for instance "all grid classes". In development I like to generate ALL classes that are possibly available because it allows me to play around in the inspector and everything is available. But tailwind has that workflow in mind too with with Just-In-Time compilation. (I still prefer my way) Anyhow, on a production site that I work on the final file size is 316KB (35kb gzipped). With a bit of tweaking the config I could get that down to around 250kb.

SkyPuncher 4y ago

Tailwind is amazing when paired with React. It completely avoids the need for a parallel, poorly coupled, poorly scoped CSS file (or whatever flavor of CSS you're using).