You'd end up with much larger source. Imagine you have a React component you render once for each element of a JSON array: products.map((product) => (

You'd end up with much larger source. Imagine you have a React component you render once for each element of a JSON array: products.map((product) => ( <li style={{color: "rgb(180 83 9)"}}>{product.name}</li> )) which would be the equivalent in tailwind of doing products.map((product) => ( <li className="text-amber-700">{product.name}</li> )) In this case, the `class="text-amber-700` attribute isn't going to be much different in size than `style="color: rgb(180 83 9)"`, but tailwind has other utility classes such as ".grid-cols-3" which would be equivalent to an inline style of "grid-template-columns: repeat(3, minmax(0, 1fr));" It also lets you set up a minification pipeline which turn the "text-amber-700" example above into something like .xJ2Xa9 { color: rgb(180 83 9); } ... <li class="xJ2Xa9">Awesome product #1</li> ... I'm sure you could minify inline CSS similarly, but I suspect the tooling there isn't as polished.