4 ms·

> 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" an

by 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
jmull 3y ago
With inline styles you can’t do media queries (e.g., so your site can look good on both phones and desktops) or pseudo selectors (e.g. :hover). Also, though it’s lower-level than something like bootstrap, it does have a design system. Bootstrap is like building a model from a kit, plain css is like building a model from scratch, and tailwindcss is like building a model from lego.
deprecative 3y ago
It's exactly the same but denser. There's no benefit that Tailwind brings that you can't get from writing your own cleaner CSS files. It's like a cult.
- jonwinstanley 3y ago
  Yes, the only thing it does is makes writing styles slightly faster and stops you having to name every different component
  - deprecative 3y ago
    Styles? Doubtful. Naming components? We have to do that anyway with how JavaScript/TypeScript frameworks work these days. Tailwind is a different way of doing it that introduces unnecessary abstractions. To me, that makes it worse than writing vanilla CSS. With CSS you don't have additional dependencies and build processes. It's just CSS.
bennyp101 3y ago
For me, when I'm working on a layout (I'm not a designer at all) it's quicker for me to parse words that describe what I want, than to type out style="border-radius: 5px; border: 1px solid #2563eb; background-color: #3b82f6" Personal choice obviously, but I work with frameworks and components if I'm doing frontend stuff, so having things as a single name for something that is consistent across everywhere I use it makes it easier for me. It's not for everyone, and that's cool.

by izoow 3y ago

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

jmull 3y ago

With inline styles you can’t do media queries (e.g., so your site can look good on both phones and desktops) or pseudo selectors (e.g. :hover). Also, though it’s lower-level than something like bootstrap, it does have a design system. Bootstrap is like building a model from a kit, plain css is like building a model from scratch, and tailwindcss is like building a model from lego.

deprecative 3y ago

It's exactly the same but denser. There's no benefit that Tailwind brings that you can't get from writing your own cleaner CSS files. It's like a cult.

jonwinstanley 3y ago
Yes, the only thing it does is makes writing styles slightly faster and stops you having to name every different component
- deprecative 3y ago
  Styles? Doubtful. Naming components? We have to do that anyway with how JavaScript/TypeScript frameworks work these days. Tailwind is a different way of doing it that introduces unnecessary abstractions. To me, that makes it worse than writing vanilla CSS. With CSS you don't have additional dependencies and build processes. It's just CSS.

bennyp101 3y ago

For me, when I'm working on a layout (I'm not a designer at all) it's quicker for me to parse words that describe what I want, than to type out style="border-radius: 5px; border: 1px solid #2563eb; background-color: #3b82f6" Personal choice obviously, but I work with frameworks and components if I'm doing frontend stuff, so having things as a single name for something that is consistent across everywhere I use it makes it easier for me. It's not for everyone, and that's cool.