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.
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.