Tailwind Buttons


Basic Button

Basic examples of bootstrap style buttons using tailwind css.

<button type="button" class="bg-blue-600 text-gray-200 rounded hover:bg-blue-500 px-4 py-2 focus:outline-none">Primary</button>
<button type="button" class="bg-gray-600 text-gray-100 rounded hover:bg-gray-500 px-4 py-2 focus:outline-none">Secondary</button>
<button type="button" class="bg-green-500 text-gray-100 rounded hover:bg-green-400 px-4 py-2 focus:outline-none">Success</button>
<button type="button" class="bg-red-500 text-gray-200 rounded hover:bg-red-400 px-4 py-2 focus:outline-none">Danger</button>
<button type="button" class="bg-yellow-400 text-gray-800 rounded hover:bg-yellow-300 px-4 py-2 focus:outline-none">Warning</button>
<button type="button" class="bg-teal-500 text-gray-100 rounded hover:bg-teal-400 px-4 py-2 focus:outline-none">Info</button>
<button type="button" class="bg-gray-300 text-gray-900 rounded hover:bg-gray-200 px-4 py-2 focus:outline-none">Light</button>
<button type="button" class="bg-gray-900 text-gray-100 rounded hover:bg-gray-800 px-4 py-2 focus:outline-none">Dark</button>

Outline Button

Example of Outline Button is shown below.

<button type="button" class="border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-gray-200 rounded px-4 py-2">Primary</button>
<button type="button" class="border border-gray-600 text-gray-600 hover:bg-gray-600 hover:text-gray-100 rounded px-4 py-2">Secondary</button>
<button type="button" class="border border-green-500 text-green-500 hover:bg-green-500 hover:text-gray-100 rounded px-4 py-2">Success</button>
<button type="button" class="border border-red-500 text-red-500 hover:bg-red-500 hover:text-gray-200 rounded px-4 py-2">Danger</button>
<button type="button" class="border border-yellow-400 text-yellow-400 hover:bg-yellow-400 hover:text-gray-800 rounded px-4 py-2">Warning</button>
<button type="button" class="border border-teal-500 text-teal-500 hover:bg-teal-500 hover:text-gray-100 rounded px-4 py-2">Info</button>
<button type="button" class="border border-gray-300 text-gray-500 hover:bg-gray-300 hover:text-gray-900 rounded px-4 py-2">Light</button>
<button type="button" class="border border-gray-900 text-gray-900 hover:bg-gray-900 hover:text-gray-100 rounded px-4 py-2">Dark</button>

Large Button Sizes

Adjust horizontal padding to px-6, vertical padding to py-3 and set font sizes text-lg to get Large tailwind button. Some examples of some large tailwind buttons are shown below.

<button type="button" class="bg-blue-600 text-gray-200 text-lg rounded hover:bg-blue-500 px-6 py-3 focus:outline-none">Primary</button>
<button type="button" class="bg-gray-600 text-gray-100 text-lg rounded hover:bg-gray-500 px-6 py-3 focus:outline-none">Secondary</button>

Small Button Sizes

Adjust horizontal padding to px-3, vertical padding to py-1 and set font sizes text-xs to get small tailwind button. Some exmaples of small tailwind buttons are shown below.

<button type="button" class="bg-blue-600 text-gray-200 text-lg rounded hover:bg-blue-500 px-6 py-3 focus:outline-none">Primary</button>
<button type="button" class="bg-gray-600 text-gray-100 text-lg rounded hover:bg-gray-500 px-6 py-3 focus:outline-none">Secondary</button>

Block Level Buttons

Add full width w-full to normal above buttons to get block level buttons. Some exmaples of Block Level tailwind buttons are shown below.

<button type="button" class="mb-1 w-full bg-blue-600 text-gray-200 rounded hover:bg-blue-500 px-4 py-2 focus:outline-none">Primary</button>
<button type="button" class="mb-1 w-full bg-gray-600 text-gray-100 rounded hover:bg-gray-500 px-2 py-2 focus:outline-none">Secondary</button>