Utility-First in Practice

Each utility class does one thing: px-5 adds horizontal padding, rounded-full rounds the corners. Combine them and you have a component.

<button class="rounded-full bg-pink-500 px-5 py-2 font-semibold text-white hover:bg-pink-600">Save</button>

Why it works

You never have to invent class names, and changing one button never breaks another page.