Tailwind Fonts Overview

Buttons

Use Tailwind utility classes for styling buttons. Combine colors, padding, rounded corners, and hover states.

<button class="bg-blue-500 text-white px-4 py-2 rounded">Primary</button>
<button class="bg-gray-300 text-black px-4 py-2 rounded">Secondary</button>
<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Success</button>

Links

Style links using colors and hover states.

<a href="#" class="text-blue-500 hover:underline">Blue link</a>
<a href="#" class="text-green-500 hover:text-green-700">Green link</a>

Blue link Green link

Form Inputs

Style inputs with borders, padding, rounded corners, and focus states.

<input type="text" class="border p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter text">
<textarea class="border p-2 rounded w-full focus:ring-2 focus:ring-green-500"></textarea>

Checkboxes & Radio Buttons

Style checkboxes and radio buttons with Tailwind.

<input type="checkbox" class="accent-blue-500"> Checkbox
<input type="radio" class="accent-green-500"> Radio

Checkbox Radio

Alerts / Messages

Use background colors, borders, padding, and rounded corners to create alert boxes.

<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4">Error message</div>
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4">Success message</div>

Error message

Success message

Badges / Tags

Small labels using background color, text color, padding, and rounded corners.

<span class="bg-blue-200 text-blue-800 px-2 py-1 rounded">Info</span>
<span class="bg-green-200 text-green-800 px-2 py-1 rounded">Success</span>