4 ms·

I know it's been said before, but no Tailwind does not replace CSS. Tailwind replaces having to come up with a new semantic class name every time you need to s

I know it's been said before, but no Tailwind does not replace CSS. Tailwind replaces having to come up with a new semantic class name every time you need to style an element only to realize the actual semantics you picked were completely wrong. Tailwind is basically a cleaner way to do everything as inline styles.

nailer 5y ago
Tailwind isn't quite inline styles (technical details) but yes, it replaces having to name 'login-box' with a copypasted set of styles that you can't change easily without massive regex work.
- blacktriangle 5y ago
  Until somebody has another similar box so they reuse login-box a bunch in your application, then you realize that they actually need to be customized and have to tear it all apart. Tailwind doesn't make you copy and paste, it moves the reuse of styles out of CSS which sucks at managing reuse into whatever HTML building system which likely has some concept of reusable views.
  - nailer 5y ago
    > Until somebody has another similar box so they reuse login-box a bunch in your application Then they make `.box` and include it as a mixin. Like CSS developers have done for a decade (and which tailwind itself does using PostCSS) > Tailwind doesn't make you copy and paste Yes it does. Moving all styles into individual elements without reuse is copy and paste.
    - deergomoo 5y ago
      > Yes it does. Moving all styles into individual elements without reuse is copy and paste Tailwind all but assumes you will be using something that allows you to extract HTML into components, be that something like React or Vue, or classic partials in a server-side templating language like Twig. You reuse the entire component, rather than just the CSS, which IMO is far better aligned with how apps are actually built. So no, using Tailwind classes is no more copy pasting than typing CSS in full into a separate stylesheet is copy pasting.
      - nailer 5y ago
        You’re misunderstanding the relationship between components and styles. Login box and messages are separate components, but they share padding metrics, border styles, a palette, etc. Have you used tailwind before?
        deergomoo 5y ago
        I use Tailwind almost exclusively these days. My argument is that using the “mr-1 pl-2” utilities on both a login box and a message would be no more copy pasting than creating a stylesheet with “.login-box { margin-right: 0.25rem; padding-left: 0.5rem; }” and “.message { margin-right: 0.25rem; padding-left: 0.5rem; }”. And if you’re suggesting that you would create a single CSS class with those properties to apply to both the login box and the message, then it’s my opinion that that is a broken abstraction that falls apart as soon as your designer asks if you can make the spacing in the login box a little looser.
Ashanmaril 5y ago
> Tailwind is basically a cleaner way to do everything as inline styles. I'd say that's underselling it. For one thing it keeps you within a design system. By default you're given spacing that works in increments of 0.25rem, a handful of colors, etc to work with (which can be replaced/extended) so you have to go out of your way to break the design system that's in place. Also inline styles don't allow for hover, focus, @media, etc. Which were always a pain in the ass with normal CSS anyway. Using Tailwind was the first time I didn't find writing a responsive UI to be a giant hassle. You just design for mobile and then for anything that needs to change on bigger screens you put a sm: or lg: or whatever breakpoint style and you're done.

nailer 5y ago

Tailwind isn't quite inline styles (technical details) but yes, it replaces having to name 'login-box' with a copypasted set of styles that you can't change easily without massive regex work.

blacktriangle 5y ago
Until somebody has another similar box so they reuse login-box a bunch in your application, then you realize that they actually need to be customized and have to tear it all apart. Tailwind doesn't make you copy and paste, it moves the reuse of styles out of CSS which sucks at managing reuse into whatever HTML building system which likely has some concept of reusable views.
- nailer 5y ago
  > Until somebody has another similar box so they reuse login-box a bunch in your application Then they make `.box` and include it as a mixin. Like CSS developers have done for a decade (and which tailwind itself does using PostCSS) > Tailwind doesn't make you copy and paste Yes it does. Moving all styles into individual elements without reuse is copy and paste.
  - deergomoo 5y ago
    > Yes it does. Moving all styles into individual elements without reuse is copy and paste Tailwind all but assumes you will be using something that allows you to extract HTML into components, be that something like React or Vue, or classic partials in a server-side templating language like Twig. You reuse the entire component, rather than just the CSS, which IMO is far better aligned with how apps are actually built. So no, using Tailwind classes is no more copy pasting than typing CSS in full into a separate stylesheet is copy pasting.
    - nailer 5y ago
      You’re misunderstanding the relationship between components and styles. Login box and messages are separate components, but they share padding metrics, border styles, a palette, etc. Have you used tailwind before?
      - deergomoo 5y ago
        I use Tailwind almost exclusively these days. My argument is that using the “mr-1 pl-2” utilities on both a login box and a message would be no more copy pasting than creating a stylesheet with “.login-box { margin-right: 0.25rem; padding-left: 0.5rem; }” and “.message { margin-right: 0.25rem; padding-left: 0.5rem; }”. And if you’re suggesting that you would create a single CSS class with those properties to apply to both the login box and the message, then it’s my opinion that that is a broken abstraction that falls apart as soon as your designer asks if you can make the spacing in the login box a little looser.

Ashanmaril 5y ago

> Tailwind is basically a cleaner way to do everything as inline styles. I'd say that's underselling it. For one thing it keeps you within a design system. By default you're given spacing that works in increments of 0.25rem, a handful of colors, etc to work with (which can be replaced/extended) so you have to go out of your way to break the design system that's in place. Also inline styles don't allow for hover, focus, @media, etc. Which were always a pain in the ass with normal CSS anyway. Using Tailwind was the first time I didn't find writing a responsive UI to be a giant hassle. You just design for mobile and then for anything that needs to change on bigger screens you put a sm: or lg: or whatever breakpoint style and you're done.