Buttons in TailwindCSS
? Buttons in Tailwind CSS
Tailwind CSS lets you create customizable buttons easily by applying utility classes for color, padding, borders, shadows, hover/focus states, and more.
Basic Button Example
<button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"> Click Me</button>bg-blue-600: button background colortext-white: white textpx-4 py-2: horizontal and vertical paddingrounded-md: medium rounded cornershover:bg-blue-700: darker blue on hoverfocus:ring-2 focus:ring-blue-500: focus ring for accessibilityfocus:outline-none: remove default outline
Common Button Variants
| Variant | Classes Example |
|---|---|
| Primary | bg-blue-600 text-white hover:bg-blue-700 |
| Secondary | bg-gray-300 text-gray-700 hover:bg-gray-400 |
| Danger | bg-red-600 text-white hover:bg-red-700 |
| Outline | border border-blue-600 text-blue-600 hover:bg-blue-100 |
| Disabled | bg-gray-300 text-gray-500 cursor-not-allowed opacity-50 |
Button Sizes
| Size | Classes Example |
|---|---|
| Small | px-2 py-1 text-sm |
| Medium | px-4 py-2 text-base |
| Large | px-6 py-3 text-lg |
Icon Button Example
<button class="bg-green-500 hover:bg-green-600 text-white p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-green-400"> <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg></button>Customizing Buttons via Tailwind Config
You can extend your tailwind.config.js to add custom colors, shadows, or variants for buttons.
Want a ready-to-use button component code with variants and states?
