3 ms·

You miss the point. Using the style attribute everywhere causes duplication; using css classes can quickly lead to bloat where you have lots of unused classes.

by mping 5y ago

You miss the point. Using the style attribute everywhere causes duplication; using css classes can quickly lead to bloat where you have lots of unused classes. This is a way of paying only for what you actually use.

jeremydw 5y ago
I don't think this is quite right. I'm not a tailwind user but I think the following: ``` <div class="flex">Foo</div> <div class="flex">Bar</div> <div class="flex">Baz</div> ``` gets generated to: ```html <div class="flex">Foo</div> <div class="flex">Bar</div> <div class="flex">Baz</div> ``` ```css .flex { display: flex; } ``` If we replaced this with `style` attribute usage, you'd get: ``` <div style="display: flex">Foo</div> <div style="display: flex">Bar</div> <div style="display: flex">Baz</div> ``` Assuming the content is gzipped when transferred (a good assumption), the non-Tailwind version's payload is smaller because there are no separate CSS definitions. Your statement is true in the general sense (a page can easily load unused CSS with other CSS/styling approaches) but I don't think it's correct to say that using Tailwind results in smaller payloads vs. using style attributes.
bcrosby95 5y ago
So the benefit of tailwind is not having to write "background-color". Got it. I don't know if its worth learning yet another framework for that.
- jeremydw 5y ago
  Someone should make a compiler that converts inline styles to Tailwind so then you don't have to learn Tailwind but can still use Tailwind. For example it can convert `<div style="background-color: white">` to `<div class="bg-white">`. Perfect! (Yes, "bg-white" is the Tailwind way to make the background color white.)
- toomanydoubts 5y ago
  Yet again, inline css has no support for media-queries, pseudo elements, states(hover, visited, active). Tailwind does. Tailwind also works as a design system, limiting you to a predefined font-sizes, spacing, etc. generating a consistent look-and-feel that requires discipline to do with inline styles.

by mping 5y ago

jeremydw 5y ago

I don't think this is quite right. I'm not a tailwind user but I think the following: ``` <div class="flex">Foo</div> <div class="flex">Bar</div> <div class="flex">Baz</div> ``` gets generated to: ```html <div class="flex">Foo</div> <div class="flex">Bar</div> <div class="flex">Baz</div> ``` ```css .flex { display: flex; } ``` If we replaced this with `style` attribute usage, you'd get: ``` <div style="display: flex">Foo</div> <div style="display: flex">Bar</div> <div style="display: flex">Baz</div> ``` Assuming the content is gzipped when transferred (a good assumption), the non-Tailwind version's payload is smaller because there are no separate CSS definitions. Your statement is true in the general sense (a page can easily load unused CSS with other CSS/styling approaches) but I don't think it's correct to say that using Tailwind results in smaller payloads vs. using style attributes.

bcrosby95 5y ago

So the benefit of tailwind is not having to write "background-color". Got it. I don't know if its worth learning yet another framework for that.

jeremydw 5y ago
Someone should make a compiler that converts inline styles to Tailwind so then you don't have to learn Tailwind but can still use Tailwind. For example it can convert `<div style="background-color: white">` to `<div class="bg-white">`. Perfect! (Yes, "bg-white" is the Tailwind way to make the background color white.)
toomanydoubts 5y ago
Yet again, inline css has no support for media-queries, pseudo elements, states(hover, visited, active). Tailwind does. Tailwind also works as a design system, limiting you to a predefined font-sizes, spacing, etc. generating a consistent look-and-feel that requires discipline to do with inline styles.