Re:Why Tailwind CSS Won
by alex_suzuki on Wednesday August 16, 2023 @06:35AM
(#37145088)
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?
[ Parent
| on HN ]
[delayed]
Re:Why Tailwind CSS Won
by harshitaneja on Wednesday August 16, 2023 @09:37AM
(#37146800)
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?
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.
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.
Re:Why Tailwind CSS Won
by harshitaneja on Wednesday August 16, 2023 @09:35AM
(#37146781)
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.
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.