Components
Buttons
Buttons are just elements styled with utilities: padding for size, a background and text color, rounded corners, and hover/focus states.
A set of button variants
Example
<div class="flex flex-wrap gap-3">
<button class="bg-sky-600 hover:bg-sky-700 text-white font-semibold px-5 py-2.5 rounded-lg transition">Primary</button>
<button class="bg-slate-100 hover:bg-slate-200 text-slate-800 font-semibold px-5 py-2.5 rounded-lg transition">Secondary</button>
<button class="border border-sky-600 text-sky-600 hover:bg-sky-50 font-semibold px-5 py-2.5 rounded-lg transition">Outline</button>
</div>Sizes and full width
Example
<div class="max-w-xs space-y-2">
<button class="bg-sky-600 text-white text-sm px-3 py-1.5 rounded">Small</button>
<button class="bg-sky-600 text-white text-lg px-6 py-3 rounded-lg">Large</button>
<button class="w-full bg-sky-600 text-white px-4 py-2.5 rounded-lg">Full width</button>
</div>💡
Repeating the same long class list? In a component framework, extract it into a reusable Button component, or use @apply (see the Customization section).