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>