DEV Community

Cover image for Create Bootstrap like Button in Tailwind CSS
saim
saim

Posted on • Originally published at larainfo.com

Create Bootstrap like Button in Tailwind CSS

#css #tailwindcss #tutorial #webdev

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

👉 View Demo

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>
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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>
Enter fullscreen mode Exit fullscreen mode

Alt Text


<button type="button" class="btn btn-lg btn-primary">Large button</button>
<button type="button" class="btn btn-lg btn-secondary">Large button</button>
Enter fullscreen mode Exit fullscreen mode 
.btn-lg {
  @apply px-4 py-4 text-xl;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Alt Text
Customize block level button

.btn-block{
@apply w-full;
}
Enter fullscreen mode Exit fullscreen mode 
<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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

candie_code profile image

HOW TO LAZY LOAD IMAGE IN REACTJS

Candie -

dhanushnehru profile image

What happens when you type a URL into your browser?

Dhanush N -

shiva6699 profile image

Submission for DEV Challenge v24.03.20: CSS Art - Favorite Snack

P V D SIVA KRISHNA -

jolamemushaj profile image

How I built CupBook

jolamemushaj -