5 ms·

I have no idea how tailwind has gotten so popular. Tailwind is a way to justify writing inline css in our HTML. This was once considered the cardinal sin of a

I have no idea how tailwind has gotten so popular. Tailwind is a way to justify writing inline css in our HTML. This was once considered the cardinal sin of a frontend developer. You avoided inline-css at all costs. But now Tailwind just makes a class for text-color-blue which simply abstracts the `text-color: blue;` css property away into its own class. But don't fool yourself, you are just writing inline css by a different name. There is no way to explain how it is more maintainable to write `class="rounded button hover:bg-color-black-700 bg-color-black-400 active:bg-color-black-500 focus:bg-color-black-500 rounded-sm text-sm text-color-gray-300"` instead of just `class="btn btn-primary"` using the "old-school" semantic approach. I can list numerous advantages of the semantic approach here. The only advantages of the tailwind approach is that you can style as you go and you can see the resulting style in the HTML page. Tailwind fanboys will say "it's easier to style in the html". But that's not true. Tailwind to be done right needs a fairly complex set of tooling to enable the hot-reloading, minification, and parsing into your pipeline. None of this is necessary with simple CSS. Semantic CSS "just works" with no tooling whatsoever. Then again, I'm old enough to have contributed to the famous CSS Zen Garden back in the day. So maybe I am just an old curmudgeon. But like all things, I expect that Tailwind's popularity will wane. Remember that before Tailwind, everything was Bootstrap. The point is that whatever tool lets developers be lazy and avoid learning fundamentals will be the tool that prevails.

nrk9819 3y ago
> I have no idea how tailwind has gotten so popular - marketing - influencers - novice developers who blindly follow infulencers - great documentation
porker 3y ago
Hey, I'm old enough to have learned CSS from CSS Zen Garden! The one thing I appreciate from Tailwind CSS and I'd like to see added to CSS itself is that I don't have to write media queries everywhere. Nothing destroys the readability of my CSS more than adding multiple media queries to adjust styling for different screen sizes. I wrote a component that used CSS Grid and needed to vary the layout as it resized, and over half of the CSS is now media query definitions. So having a built-in way to streamline defining media queries, and a built-in way to select in line styling from breakpoints a la `py-2 md:py-6` are my 2 asks for CSS after using Tailwind. (I would prefer to do away with many breakpoints and have a properly fluid design, but IME it's a lot more work and designers can't get their heads around it, let alone clients. And where images are involved it's easier to have a smaller range of possible sizes for the srcset)
- miragecraft 3y ago
  You can hack together responsive properties using the space toggle technique. https://miragecraft.com/blog/responsive-css-properties https://miragecraft.com/blog/responsive-css-properties This is what I use for my own site.
Pwntheon 3y ago
I have a hard time articulating exactly why, but I believe tailwind is popular because it allows developers who are not designers to ignore design/css best practices and just write inline styles again like they used to, before everyone starting telling them that this was bad practice. I had a rough road learning css, and have been in a few situations where my css/design skills were insufficient to the tasks I was expected to solve. Inline styling let me work more intuitively, and in large part skip learning a whole new paradigm/architecture "just to style some components". As I eventually grew and had time to work on styling/design in a less stressful environment, I gradually got better at it. Not by practice so much as by learning a new way to frame the problems of styling differently from the problems of "pure" programming. Had tailwind been around back then I'm sure I'd be a big proponent. It's a product that proposes to solve the cognitive dissonance for a programmer with lots of experience coding, but little experience designing being asked to structure and reason about their work in an uncomfortably different way. I think tailwind solves a real problem, just not the one we're being told it does.
- jonwinstanley 3y ago
  Tailwind is popular because it works really well for a lot of people. It's not about marketing or people being tricked by marketing. Sure - it's very different to the old way, and takes some getting used to, but a lot of people enjoy using it. But also people can still build sites the old way if they wish - that's ok too.
solid_fuel 3y ago
I think the divide here is whether or not your stack includes the concept of components. I think it's perfectly maintainable to write `class="rounded button hover:bg-color-black-700 bg-color-black-400 active:bg-color-black-500 focus:bg-color-black-500 rounded-sm text-sm text-color-gray-300"` because I only write it once, in my Button component. Then everywhere else, I just write `<Button>Inner Text</Button>`. The key difference is when I want to change how my site's Buttons look or behave, I only have to look in the `button.ex` file, instead of tracking down the relevant button classes in a mess of CSS files. Tailwind is not a good solution if you're writing something for CSS Zen Garden or a my_blog.html type website. Of course the repetition will render it an unreadable mess. But it is a wonderful solution when you have a framework generating the HTML for you.
- lawn 3y ago
  > because I only write it once, in my Button component. Unless of course you have several similar buttons with only minor differences between them. Maybe copy-paste? And then you have to slightly tweak your buttons... Or add conditional effects or dark mode and the complexity explodes, just on a simple button.
  - MrJohz 3y ago
    The same is true of CSS classes, though - there you have the same choice between reuse and duplication. Do you have .button-primary, .button-secondary, etc, or do you use modifiers instead? The combinatorial complexity is inherent in the design of these sorts of components, you won't get away from it just by using a different tool to write your styles.
    - lawn 3y ago
      But CSS handles it much better, which is the point. You separate it into a .button class, and then further specialize it by adding more classes (like ".button .button-primary"). With Tailwind everything is duplicated, but with CSS you can move out the common parts.

nrk9819 3y ago

> I have no idea how tailwind has gotten so popular - marketing - influencers - novice developers who blindly follow infulencers - great documentation

porker 3y ago

Hey, I'm old enough to have learned CSS from CSS Zen Garden! The one thing I appreciate from Tailwind CSS and I'd like to see added to CSS itself is that I don't have to write media queries everywhere. Nothing destroys the readability of my CSS more than adding multiple media queries to adjust styling for different screen sizes. I wrote a component that used CSS Grid and needed to vary the layout as it resized, and over half of the CSS is now media query definitions. So having a built-in way to streamline defining media queries, and a built-in way to select in line styling from breakpoints a la `py-2 md:py-6` are my 2 asks for CSS after using Tailwind. (I would prefer to do away with many breakpoints and have a properly fluid design, but IME it's a lot more work and designers can't get their heads around it, let alone clients. And where images are involved it's easier to have a smaller range of possible sizes for the srcset)

miragecraft 3y ago
You can hack together responsive properties using the space toggle technique. https://miragecraft.com/blog/responsive-css-properties https://miragecraft.com/blog/responsive-css-properties This is what I use for my own site.

Pwntheon 3y ago

I have a hard time articulating exactly why, but I believe tailwind is popular because it allows developers who are not designers to ignore design/css best practices and just write inline styles again like they used to, before everyone starting telling them that this was bad practice. I had a rough road learning css, and have been in a few situations where my css/design skills were insufficient to the tasks I was expected to solve. Inline styling let me work more intuitively, and in large part skip learning a whole new paradigm/architecture "just to style some components". As I eventually grew and had time to work on styling/design in a less stressful environment, I gradually got better at it. Not by practice so much as by learning a new way to frame the problems of styling differently from the problems of "pure" programming. Had tailwind been around back then I'm sure I'd be a big proponent. It's a product that proposes to solve the cognitive dissonance for a programmer with lots of experience coding, but little experience designing being asked to structure and reason about their work in an uncomfortably different way. I think tailwind solves a real problem, just not the one we're being told it does.

jonwinstanley 3y ago
Tailwind is popular because it works really well for a lot of people. It's not about marketing or people being tricked by marketing. Sure - it's very different to the old way, and takes some getting used to, but a lot of people enjoy using it. But also people can still build sites the old way if they wish - that's ok too.

solid_fuel 3y ago

I think the divide here is whether or not your stack includes the concept of components. I think it's perfectly maintainable to write `class="rounded button hover:bg-color-black-700 bg-color-black-400 active:bg-color-black-500 focus:bg-color-black-500 rounded-sm text-sm text-color-gray-300"` because I only write it once, in my Button component. Then everywhere else, I just write `<Button>Inner Text</Button>`. The key difference is when I want to change how my site's Buttons look or behave, I only have to look in the `button.ex` file, instead of tracking down the relevant button classes in a mess of CSS files. Tailwind is not a good solution if you're writing something for CSS Zen Garden or a my_blog.html type website. Of course the repetition will render it an unreadable mess. But it is a wonderful solution when you have a framework generating the HTML for you.

lawn 3y ago
> because I only write it once, in my Button component. Unless of course you have several similar buttons with only minor differences between them. Maybe copy-paste? And then you have to slightly tweak your buttons... Or add conditional effects or dark mode and the complexity explodes, just on a simple button.
- MrJohz 3y ago
  The same is true of CSS classes, though - there you have the same choice between reuse and duplication. Do you have .button-primary, .button-secondary, etc, or do you use modifiers instead? The combinatorial complexity is inherent in the design of these sorts of components, you won't get away from it just by using a different tool to write your styles.
  - lawn 3y ago
    But CSS handles it much better, which is the point. You separate it into a .button class, and then further specialize it by adding more classes (like ".button .button-primary"). With Tailwind everything is duplicated, but with CSS you can move out the common parts.