In this section, we will see how can we create bootstrap like ui button in Tailwind CSS. I hope you know bootstrap, it is also css framework bootstrap is very simple and easy to use. If you want to create code like bootstrap 4, bootstrap 5, Then you can create easily. For this tutorial, we will also customize tailwind classes like bootstrap classes. Before we start you should know how to install or configure tailwind css classes or you can read link below article.
The Easiest way to install Tailwind CSS with Tailwind CLI
How to Install Tailwind CSS with NPM
Example 1
Create a simple classic bootstrap like button using Tailwind CSS 2.
<button
type="button"
class="px-6 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600"
>
Primary
</button>
<button
type="button"
class="px-6 py-2 text-white bg-gray-500 rounded-md hover:bg-gray-600"
>
Secondary
</button>
<button
type="button"
class="px-6 py-2 text-white bg-green-500 rounded-md hover:bg-green-600"
>
Success
</button>
<button
type="button"
class="px-6 py-2 text-white bg-red-500 rounded-md hover:bg-red-600"
>
Danger
</button>
<button
type="button"
class="px-6 py-2 text-white bg-yellow-500 rounded-md hover:bg-yellow-600"
>
Warning
</button>
<button
type="button"
class="px-6 py-2 text-white bg-blue-400 rounded-md hover:bg-blue-500"
>
Info
</button>
<button
type="button"
class="px-6 py-2 text-gray-800 rounded-md bg-gray-50 hover:bg-gray-100"
>
Light
</button>
<button
type="button"
class="px-6 py-2 text-white bg-gray-700 rounded-md hover:bg-gray-900"
>
Dark
</button>
tailwind Bootstrap v1
Customizing tailwind classes like bootstrap using @apply
@apply
@apply help to inline any existing utility classes into your own custom CSS.
@tailwind base;
@tailwind components;
@tailwind utilities;
.btn {
@apply px-6 py-2 rounded;
}
.btn-primary {
@apply text-white rounded-md bg-blue-500 hover:bg-blue-600;
}
.btn-secondary {
@apply text-white rounded-md bg-gray-500 hover:bg-gray-600;
}
.btn-success {
@apply text-white rounded-md bg-green-500 hover:bg-green-600;
}
.btn-danger {
@apply text-white rounded-md bg-red-500 hover:bg-red-600;
}
.btn-warning {
@apply text-white rounded-md bg-yellow-500 hover:bg-yellow-600;
}
.btn-info {
@apply text-white rounded-md bg-blue-400 hover:bg-blue-500;
}
.btn-light {
@apply text-gray-800 rounded-md bg-gray-50 hover:bg-gray-100;
}
.btn-dark {
@apply text-white rounded-md bg-gray-700 hover:bg-gray-900;
}
Customize bootstrap classic button style is ready to use in Tailwind CSS.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
Example 2
Create outline bootstrap like button using Tailwind CSS 2.
<button
type="button"
class="px-6 py-2 text-blue-600 border border-blue-600 rounded-md hover:bg-blue-500 hover:text-white"
>
Primary
</button>
<button
type="button"
class="px-6 py-2 text-gray-600 border border-gray-600 rounded-md hover:bg-gray-500 hover:text-white"
>
Secondary
</button>
<button
type="button"
class="px-6 py-2 text-green-600 border border-green-600 rounded-md hover:bg-green-500 hover:text-white"
>
Success
</button>
<button
type="button"
class="px-6 py-2 text-red-600 border border-red-600 rounded-md hover:bg-red-500 hover:text-white"
>
Danger
</button>
<button
type="button"
class="px-6 py-2 text-yellow-600 border border-yellow-600 rounded-md hover:bg-yellow-500 hover:text-white"
>
Warning
</button>
<button
type="button"
class="px-6 py-2 text-blue-400 border border-blue-400 rounded-md hover:bg-blue-400 hover:text-white"
>
Info
</button>
<button
type="button"
class="px-6 py-2 text-gray-500 border border-gray-600 rounded-md hover:bg-gray-100 hover:text-gray-500"
>
Light
</button>
<button
type="button"
class="px-6 py-2 text-gray-800 border border-gray-800 rounded-md hover:bg-gray-800 hover:text-white"
>
Dark
</button>
tailwind Bootstrap v2
Customizing tailwind classes like outline bootstrap using @apply
@tailwind base;
@tailwind components;
@tailwind utilities;
/* outline button example */
.btn {
@apply px-6 py-2 rounded;
}
.btn-outline-primary {
@apply text-blue-600 rounded-md border border-blue-600 hover:bg-blue-500 hover:text-white;
}
.btn-outline-secondary {
@apply text-gray-600 rounded-md border border-gray-600 hover:bg-gray-500 hover:text-white;
}
.btn-outline-success {
@apply text-green-600 rounded-md border border-green-600 hover:bg-green-500 hover:text-white;
}
.btn-outline-danger {
@apply text-red-600 rounded-md border border-red-600 hover:bg-red-500 hover:text-white;
}
.btn-outline-warning {
@apply text-yellow-600 rounded-md border border-yellow-600 hover:bg-yellow-500 hover:text-white;
}
.btn-outline-info {
@apply text-blue-400 rounded-md border border-blue-400 hover:bg-blue-400 hover:text-white;
}
.btn-outline-light {
@apply text-gray-500 rounded-md border border-gray-600 hover:bg-gray-100 hover:text-gray-500;
}
.btn-outline-dark {
@apply text-gray-800 py-2 px-6 rounded-md border border-gray-800 hover:bg-gray-800 hover:text-white;
}
Customize bootstrap outline button style is ready to use in Tailwind CSS.
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Example 3
Create small and large bootstrap like button using Tailwind CSS 2.
Small Button
<button
type="button"
class="text-white text-sm px-2 py-1 rounded-md bg-blue-500 hover:bg-blue-600"
>
Small button
</button>
<button
type="button"
class="text-white text-sm py-1 px-2 rounded-md bg-gray-500 hover:bg-gray-600"
>
Small button
</button>
tailwind Bootstrap v3
Note: You can override tailwind classes if you are using configure @apply
Customize small button
.btn {
@apply px-6 py-2 rounded;
}
.btn-primary {
@apply text-white rounded-md bg-blue-500 hover:bg-blue-600;
}
.btn-secondary {
@apply text-white rounded-md bg-gray-500 hover:bg-gray-600;
}
.btn-sm {
@apply px-2 py-1 text-sm;
}
Customize small button.
<button type="button" class="btn btn-sm btn-primary">Small button</button>
<button type="button" class="btn btn-sm btn-secondary">Small button</button>
Large Button
<button
type="button"
class="px-4 py-4 text-xl text-white bg-blue-500 rounded-md hover:bg-blue-600"
>
Large button
</button>
<button
type="button"
class="px-4 py-4 text-xl text-white bg-gray-500 rounded-md hover:bg-gray-600"
>
Large button
</button>
tailwind Bootstrap v4
Customize large button
<button type="button" class="btn btn-lg btn-primary">Large button</button>
<button type="button" class="btn btn-lg btn-secondary">Large button</button>
.btn-lg {
@apply px-4 py-4 text-xl;
}
Example 4
Create full width or block bootstrap like button using Tailwind CSS 2.
<button
type="button"
class="w-full py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600"
>
Block level button
</button>
<button
type="button"
class="w-full py-2 text-white bg-gray-500 rounded-md hover:bg-gray-600"
>
Block level button
</button>
tailwind Bootstrap v5
Customize block level button
.btn-block{
@apply w-full;
}
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-block">Block level button</button>
