3 ms·
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 c
by 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.