5 ms·

"Basically just inline CSS, but less fiddly and much more optimizable than the style attribute" was always the selling point of Tailwind in the first place.

rglullis 2y ago
Then, yes. But nowadays CSS is a lot more powerful and has caught up. So why bother with Tailwind?
- Sateeshm 2y ago
  Because of multitude of reasons. One of the big ones being never having to search through a style tag or finding a CSS file. 100% of the element styling is described in the element markup. Tailwind was never about filling gaps in CSS.
  - someothherguyy 2y ago
    That is atomic CSS, and it predates tailwind by quite a bit. There is a huge marketing push behind tailwind. If you look into who made it, you'd see it wasn't their first attempt.
- BeetleB 2y ago
  Do you have any links describing what you mean? I'm not a CSS guru, and perhaps I know only the "old" CSS. I did recently learn Tailwind and it's way nicer than the "old" CSS. If modern CSS makes styling as easy as Tailwind does, I'd love to read about it.
- buzzerbetrayed 2y ago
  Why do you keep saying CSS has “caught up”? Tailwind has always just mapped to CSS, so you’ve always been able to do anything in CSS that you could do in tailwind. What has CSS done that makes you see no value in Tailwind today where you used to see value?
- jitl 2y ago
  CSS has become more confusing over time, not less confusing, so the upside of a utility class approach like Tailwind is also improving over time rather than decreasing. Tailwind solves css confusion by presenting a “paved road” for many tasks. Want to do “thing”? Just look up “thing” in the tailwind docs, add “thing-2” to your class, done in 2 minutes. Rather than look up “thing” on google, skim several articles, then write 4-10 lines of CSS, done in 30 minutes. As CSS has gotten more complexity from new capabilities, solving various tasks with it feels more and more like a research project. Like centering a div vertically and horizontally - there’s now 3-4 generations of solutions for this task: 1. Hacky stuff with position: absolute or floats 2. Flexbox approach. Hope you remember the 6 different attributes you need to set! Oh, there’s a new shorthand for flex now? Cool! More stuff to learn. 3. Grid approach. There are a bunch of different ways to structure a grid centering approach. Hope you remember how grid templates work! With tailwind, just add 2 classes, done.
  - rglullis 2y ago
    > With tailwind, just add 2 classes, done. But you can do that with a library of SASS mixins as well. Going through some of the answers I'm noticing that another "issue" I have with the tailwind approach is that it works by providing a post-processor when in reality most people just need a simple preprocessor and macro system.
    - jitl 2y ago
      Sure? I don’t see how that’s an argument for CSS “being advanced enough” - SASS ain’t CSS. I like SASS (I wrote a lisp in SASS in 2011 lol) and that’s actually how I think about Tailwind utilities - it’s just using SASS mixins directly in your HTML. I would rather use Tailwind because it will take 1/3 the levels of abstraction, 1/4 the keystrokes and 1/2 the files to do the same job to: 1. Pick a class name (myclass) if people are using BEM or something this requires some algebraic thinking. 2. Write the class in file.scss to define the class and include mixins A, B, C 3. Add class=myclass in my html. Vs tailwind: 1. Add class=“A B C” to my html. I don’t really get pre processor vs post processor, it’s a build step to run at some point before I deploy with either tool that will produce some css files. ¯\_(ツ)_/¯
- listenallyall 2y ago
  A concrete example that seems like a no-brainer to me: let's add a little padding to the top and bottom of an element. "py-2" Done. In CSS, specifying padding (or margins) is 4 values... except I forget which is the first one. And what units should I use... px, pt, rem, em. Inline, same-page style, or an external .css file? If not inline, what should I name the class? Vanilla CSS literally requires 10x more time and mental attention.
  - rglullis 2y ago
    > "py-2" Done. In CSS, specifying padding (or margins) is 4 values... except I forget which is the first one. False dichotomy. You are not stuck between tailwind and "Vanilla CSS", and one can solve the issue you are presenting with any reasonable set of SASS mixins. > If not inline, what should I name the class? Also solvable with good old SASS.
  - megaman821 2y ago
    You can using padding-inline and padding-block with var(--spacing-2). Tailwind is styling utility classes and design tokens in one. There are premade design tokens you can use the CSS styling though.
Sateeshm 2y ago
But it's not just inline css though. The length of inline css string would almost always be 3 times longer than tailwind classes string. Also inline css doesn't allow media queries, pseudo classes, etc., which is a big deal.

rglullis 2y ago

Then, yes. But nowadays CSS is a lot more powerful and has caught up. So why bother with Tailwind?

Sateeshm 2y ago
Because of multitude of reasons. One of the big ones being never having to search through a style tag or finding a CSS file. 100% of the element styling is described in the element markup. Tailwind was never about filling gaps in CSS.
- someothherguyy 2y ago
  That is atomic CSS, and it predates tailwind by quite a bit. There is a huge marketing push behind tailwind. If you look into who made it, you'd see it wasn't their first attempt.
BeetleB 2y ago
Do you have any links describing what you mean? I'm not a CSS guru, and perhaps I know only the "old" CSS. I did recently learn Tailwind and it's way nicer than the "old" CSS. If modern CSS makes styling as easy as Tailwind does, I'd love to read about it.
buzzerbetrayed 2y ago
Why do you keep saying CSS has “caught up”? Tailwind has always just mapped to CSS, so you’ve always been able to do anything in CSS that you could do in tailwind. What has CSS done that makes you see no value in Tailwind today where you used to see value?
jitl 2y ago
CSS has become more confusing over time, not less confusing, so the upside of a utility class approach like Tailwind is also improving over time rather than decreasing. Tailwind solves css confusion by presenting a “paved road” for many tasks. Want to do “thing”? Just look up “thing” in the tailwind docs, add “thing-2” to your class, done in 2 minutes. Rather than look up “thing” on google, skim several articles, then write 4-10 lines of CSS, done in 30 minutes. As CSS has gotten more complexity from new capabilities, solving various tasks with it feels more and more like a research project. Like centering a div vertically and horizontally - there’s now 3-4 generations of solutions for this task: 1. Hacky stuff with position: absolute or floats 2. Flexbox approach. Hope you remember the 6 different attributes you need to set! Oh, there’s a new shorthand for flex now? Cool! More stuff to learn. 3. Grid approach. There are a bunch of different ways to structure a grid centering approach. Hope you remember how grid templates work! With tailwind, just add 2 classes, done.
- rglullis 2y ago
  > With tailwind, just add 2 classes, done. But you can do that with a library of SASS mixins as well. Going through some of the answers I'm noticing that another "issue" I have with the tailwind approach is that it works by providing a post-processor when in reality most people just need a simple preprocessor and macro system.
  - jitl 2y ago
    Sure? I don’t see how that’s an argument for CSS “being advanced enough” - SASS ain’t CSS. I like SASS (I wrote a lisp in SASS in 2011 lol) and that’s actually how I think about Tailwind utilities - it’s just using SASS mixins directly in your HTML. I would rather use Tailwind because it will take 1/3 the levels of abstraction, 1/4 the keystrokes and 1/2 the files to do the same job to: 1. Pick a class name (myclass) if people are using BEM or something this requires some algebraic thinking. 2. Write the class in file.scss to define the class and include mixins A, B, C 3. Add class=myclass in my html. Vs tailwind: 1. Add class=“A B C” to my html. I don’t really get pre processor vs post processor, it’s a build step to run at some point before I deploy with either tool that will produce some css files. ¯\_(ツ)_/¯
listenallyall 2y ago
A concrete example that seems like a no-brainer to me: let's add a little padding to the top and bottom of an element. "py-2" Done. In CSS, specifying padding (or margins) is 4 values... except I forget which is the first one. And what units should I use... px, pt, rem, em. Inline, same-page style, or an external .css file? If not inline, what should I name the class? Vanilla CSS literally requires 10x more time and mental attention.
- rglullis 2y ago
  > "py-2" Done. In CSS, specifying padding (or margins) is 4 values... except I forget which is the first one. False dichotomy. You are not stuck between tailwind and "Vanilla CSS", and one can solve the issue you are presenting with any reasonable set of SASS mixins. > If not inline, what should I name the class? Also solvable with good old SASS.
- megaman821 2y ago
  You can using padding-inline and padding-block with var(--spacing-2). Tailwind is styling utility classes and design tokens in one. There are premade design tokens you can use the CSS styling though.

Sateeshm 2y ago

But it's not just inline css though. The length of inline css string would almost always be 3 times longer than tailwind classes string. Also inline css doesn't allow media queries, pseudo classes, etc., which is a big deal.