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.

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.

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

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.