Tailwind Component Button

Jan 6, 2023

Tailwind Button Component

Using utility classes

<button type="button" class="px-4 py-2 font-medium rounded-lg border border-gray-200 hover:bg-gray-100">  Button</button><button type="button" class="px-4 py-2 font-medium rounded-lg border border-gray-500 hover:bg-gray-100">  Outline Button</button><button type="button" class="px-4 py-2 font-medium rounded-lg border border-gray-900 text-white bg-gray-900 hover:bg-gray-700">  Outline Filled</button><NuxtLink class="w-fit cursor-pointer m-0 px-4 py-2 font-medium rounded-lg border border-gray-200 hover:bg-gray-100">  Link</NuxtLink><NuxtLink class="w-fit cursor-pointer m-0 px-4 py-2 font-medium rounded-lg border border-gray-200 hover:bg-gray-100 no-link">  Link (No Link)</NuxtLink><NuxtLink class="w-fit cursor-pointer m-0 px-4 py-2 font-medium rounded-lg border border-gray-200 hover:bg-gray-100 button-link">  Link (Button Link)</NuxtLink>

Create custom component classes

@layer components {  .t-button {    @apply w-fit cursor-pointer px-4 py-2 font-medium rounded-lg border border-gray-200 hover:bg-gray-100  }  .t-button-outline {    @apply border-gray-500  }  .t-button-fill {    @apply border-gray-900 text-white bg-gray-900 hover:bg-gray-700  }}

NOTE: Refer Tailwind Custom Base CSS and Tailwind Organize Components CSS File.

Usage

<button type="button" class="t-button">  Button</button><button type="button" class="t-button t-button-outline">  Outline Button</button><button type="button" class="t-button t-button-fill">  Outline Filled</button><NuxtLink class="t-button">  Link</NuxtLink><NuxtLink class="t-button no-link">  Link (No Link)</NuxtLink><NuxtLink class="t-button button-link">  Link (Button Link)</NuxtLink>

NOTE: Github Repo of Tailwind Components

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.