4 ms·

I always felt slightly dirty after writing a bit of inline CSS (`style=”color: red“`) instead of a proper class, yet at the same time it accomplishes the goal a

I always felt slightly dirty after writing a bit of inline CSS (`style=”color: red“`) instead of a proper class, yet at the same time it accomplishes the goal and it was fast. So this is basically Tailwind, right?

yurishimo 3y ago
Basically, but with two important extras: media queries and child selectors. It’s impossible to write a media query or target a child with inline styles. With tailwind, the first one is encouraged and the second is at least possible, and in some scenarios, encouraged (group hover).
- harshitaneja 3y ago
  Child selectors I can understand. But won't media queries mostly be limited to containers and thus used sparsely and those cases would warrant having a class of their own even if one decides that named classes for each element is a hassle?
Clueed 3y ago
Another aspect is css class reuse. Inline styles are not preprocessed so each inline style is a 1:1 increase in bundle size. In large applications this can be significant. Imagine having hundreds of popups each with 50 lines of css. It adds up.
ajanuary 3y ago
One of the selling points that Tailwind pushes that I haven't seen other people mention here is that inline styles are _too_ flexible. You can do `style="color: red"`, but you can also do `style="color: #FE0005"` or `style="color: #FE1111"`. While tailwind lets you write your styles in the same _location_ as the style attribute, it allows you to restrict what _values_ you can use. You can set up a colour palette so that when you say `class="red"`, it's the shade of red that you (or your designer) picked, and your colleague can't decide to pick a slightly different shade for their component.
- harshitaneja 3y ago
  Can't this be solved by creating small css classes for your colour palette like font-color-primary, background-color-warn, etc? The benefit being that anyone who needs to include these only needs to think about the context and have consistency everywhere.
  - ajanuary 3y ago
    Yup. This isn’t the killer feature of tailwind that’s impossible to get any other way. It’s one component of a bigger solution. But why it’s relevant here is it’s an example of how that bigger solution is different to just using style attributes.

yurishimo 3y ago

Basically, but with two important extras: media queries and child selectors. It’s impossible to write a media query or target a child with inline styles. With tailwind, the first one is encouraged and the second is at least possible, and in some scenarios, encouraged (group hover).

harshitaneja 3y ago
Child selectors I can understand. But won't media queries mostly be limited to containers and thus used sparsely and those cases would warrant having a class of their own even if one decides that named classes for each element is a hassle?

Clueed 3y ago

Another aspect is css class reuse. Inline styles are not preprocessed so each inline style is a 1:1 increase in bundle size. In large applications this can be significant. Imagine having hundreds of popups each with 50 lines of css. It adds up.

ajanuary 3y ago

One of the selling points that Tailwind pushes that I haven't seen other people mention here is that inline styles are _too_ flexible. You can do `style="color: red"`, but you can also do `style="color: #FE0005"` or `style="color: #FE1111"`. While tailwind lets you write your styles in the same _location_ as the style attribute, it allows you to restrict what _values_ you can use. You can set up a colour palette so that when you say `class="red"`, it's the shade of red that you (or your designer) picked, and your colleague can't decide to pick a slightly different shade for their component.

harshitaneja 3y ago
Can't this be solved by creating small css classes for your colour palette like font-color-primary, background-color-warn, etc? The benefit being that anyone who needs to include these only needs to think about the context and have consistency everywhere.
- ajanuary 3y ago
  Yup. This isn’t the killer feature of tailwind that’s impossible to get any other way. It’s one component of a bigger solution. But why it’s relevant here is it’s an example of how that bigger solution is different to just using style attributes.