4 ms·

For getting designs up and running quickly, it really is great. Being able to think "Hmmm, I want a rounded button, with a border and a blue background" and ju

For getting designs up and running quickly, it really is great. Being able to think "Hmmm, I want a rounded button, with a border and a blue background" and just typing class="rounded border border-blue-600 bg-blue-500" and it's done. With lots of UI being components now, it doesn't really matter that it is verbose - I actually find that helpful. And even if you want to have a class that you use all over the place, just use @apply and create a custom class that you can use anywhere. One place it can be hard to use, is if you have a specific design system - then yea at that point you either work with Tailwind and modify the config to match, or you just go with standard CSS - but at that point it probably makes sense.

xigoi 3y ago
> Being able to think "Hmmm, I want a rounded button, with a border and a blue background" I rarely think this. It's usually “I want a button that looks like all other buttons on my site”. Vanilla CSS is great for that.
- chipgap98 3y ago
  Tailwind is also great for this. You create components with Tailwind that make this trivial
  - Sander_Marechal 3y ago
    Then you're just back at regular CSS with extra steps
  - fjfuvucucuc 3y ago
    "trivial"? So I still have to componentize my presentation layers to do tailwind "correctly", but instead of writing CSS in readable multiline chunks in a language every developer already knows, I need to use this cryptic one liner in any order that literally nobody can read? What in the hell is wrong with this industry? Sometimes clever ideas aren't all that clever. Sometimes they're just dumb.
    - wildrhythms 3y ago
      This might surprise you but most industry web development today is using components powered by a framework, and Tailwind fits in perfectly to the close coupling of styles to components.
      - Incipient 3y ago
        But in components with scoped styling, you're better off just using css directly. Create a class that has all the styles you want, then use it in the HTML - nicely and cleanly separates css and HTML code.
        zztop44 3y ago
        Why do you want to separate the CSS and HTML? They’re both style info, especially in component design.
        fjfuvucucuc 3y ago
        Because they're not both style info? Html is a markup language, it applies semantic structure to your content, CSS styles html. Classes are a tool for selecting markup to style. Sure, you can create a class for every single CSS rule you write, but just because you can doesn't mean you should.
  - jacobr 3y ago
    Yes, the biggest drawback of Tailwind is React. Or specifically, relying on components as the mechanism for style composition.
- deleted 3y ago
  [deleted]
- LtdJorge 3y ago
  I assume OP means that for the fist button of the site, as in creating the site from 0.
  - xigoi 3y ago
    In that case, you just write button { /* your styles here */ } to set a precedent for all your future buttons.
    - troupo 3y ago
      In that case you end up with fifteen different variations of that button, class names like "button-cta__hero__overlay" and a smattering of !importants to defeat the cascade you can't chase down
      - xigoi 3y ago
        I've never ended up with something like this.
        withinboredom 3y ago
        Work in bigger teams with bespoke css. It will happen ... eventually ... without fail.
- peferron 3y ago
  CSS classes are great for that until you need to reuse HTML and/or JS, at which point you're back to square one. People are moving to components because they solve these 3 things at once.
izoow 3y ago
> Being able to think "Hmmm, I want a rounded button, with a border and a blue background" and just typing class="rounded border border-blue-600 bg-blue-500" and it's done. I'm not a frontend developer and don't really know much about these frameworks, but how is this different from just using style="actual css"? This just feels like inline styles reinvented for whatever reason.
- wildrhythms 3y ago
  Yes it's like inline styling, but the difference is that with Tailwind your build has just 1 CSS class with { display: flex; } used across your HTML, rather than inline styling or decoupled stylesheets with hundreds of instances of {display: flex}. If you use a framework like React, Angular, Svelte, it makes sense because your styles are usually coupled to your components anyway.
  - strken 3y ago
    There is a real though very niche reason why having fewer selectors is useful, speaking as someone who has run into the selector limit in IE before.
    - martyfmelb 3y ago
      Also speaking from experience — you have to have a lot of bespoke CSS and virtually no design system / internal consistency to run into that limit (a.k.a the Movember 2013 brand refresh). And finally, when you did run into the IE selector limit, you could just split the style sheet in two (fairly trivial if you were using Sass), because the selector limit was per stylesheet.
- pcthrowaway 3y ago
  the style attribute doesn't have the full power of stylesheets (and thus tailwind). media queries and pseudo-elements are impossible, just off the top of my head. Tailwind's patterns for device responsiveness are actually the most intuitive I've tried
- 3y ago

xigoi 3y ago

> Being able to think "Hmmm, I want a rounded button, with a border and a blue background" I rarely think this. It's usually “I want a button that looks like all other buttons on my site”. Vanilla CSS is great for that.

chipgap98 3y ago
Tailwind is also great for this. You create components with Tailwind that make this trivial
- Sander_Marechal 3y ago
  Then you're just back at regular CSS with extra steps
- fjfuvucucuc 3y ago
  "trivial"? So I still have to componentize my presentation layers to do tailwind "correctly", but instead of writing CSS in readable multiline chunks in a language every developer already knows, I need to use this cryptic one liner in any order that literally nobody can read? What in the hell is wrong with this industry? Sometimes clever ideas aren't all that clever. Sometimes they're just dumb.
  - wildrhythms 3y ago
    This might surprise you but most industry web development today is using components powered by a framework, and Tailwind fits in perfectly to the close coupling of styles to components.
    - Incipient 3y ago
      But in components with scoped styling, you're better off just using css directly. Create a class that has all the styles you want, then use it in the HTML - nicely and cleanly separates css and HTML code.
      - zztop44 3y ago
        Why do you want to separate the CSS and HTML? They’re both style info, especially in component design.
        fjfuvucucuc 3y ago
        Because they're not both style info? Html is a markup language, it applies semantic structure to your content, CSS styles html. Classes are a tool for selecting markup to style. Sure, you can create a class for every single CSS rule you write, but just because you can doesn't mean you should.
- jacobr 3y ago
  Yes, the biggest drawback of Tailwind is React. Or specifically, relying on components as the mechanism for style composition.
deleted 3y ago
[deleted]
LtdJorge 3y ago
I assume OP means that for the fist button of the site, as in creating the site from 0.
- xigoi 3y ago
  In that case, you just write button { /* your styles here */ } to set a precedent for all your future buttons.
  - troupo 3y ago
    In that case you end up with fifteen different variations of that button, class names like "button-cta__hero__overlay" and a smattering of !importants to defeat the cascade you can't chase down
    - xigoi 3y ago
      I've never ended up with something like this.
      - withinboredom 3y ago
        Work in bigger teams with bespoke css. It will happen ... eventually ... without fail.
peferron 3y ago
CSS classes are great for that until you need to reuse HTML and/or JS, at which point you're back to square one. People are moving to components because they solve these 3 things at once.

izoow 3y ago

> Being able to think "Hmmm, I want a rounded button, with a border and a blue background" and just typing class="rounded border border-blue-600 bg-blue-500" and it's done. I'm not a frontend developer and don't really know much about these frameworks, but how is this different from just using style="actual css"? This just feels like inline styles reinvented for whatever reason.

wildrhythms 3y ago
Yes it's like inline styling, but the difference is that with Tailwind your build has just 1 CSS class with { display: flex; } used across your HTML, rather than inline styling or decoupled stylesheets with hundreds of instances of {display: flex}. If you use a framework like React, Angular, Svelte, it makes sense because your styles are usually coupled to your components anyway.
- strken 3y ago
  There is a real though very niche reason why having fewer selectors is useful, speaking as someone who has run into the selector limit in IE before.
  - martyfmelb 3y ago
    Also speaking from experience — you have to have a lot of bespoke CSS and virtually no design system / internal consistency to run into that limit (a.k.a the Movember 2013 brand refresh). And finally, when you did run into the IE selector limit, you could just split the style sheet in two (fairly trivial if you were using Sass), because the selector limit was per stylesheet.
pcthrowaway 3y ago
the style attribute doesn't have the full power of stylesheets (and thus tailwind). media queries and pseudo-elements are impossible, just off the top of my head. Tailwind's patterns for device responsiveness are actually the most intuitive I've tried
3y ago