tailwind-btn.vue

<template>
  <button :class="computedClass">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'ip-button',
  props: {
    outline: {
      type: Boolean,
      default: false
    },
    pill: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    computedClass() {
      let c = 'btn'
      if (this.outline) c += ' btn-outline-blue'
      else c += ' btn-blue'

      if (this.pill) c += ' rounded-full'
      else c += ' rounded'

      if (this.disabled) c += ' btn-disabled'

      return c
    }
  }
}
</script>

<style scoped>
  .btn {
    @apply font-bold py-2 px-4 inline-flex items-center;
  }
  .btn-blue {
    @apply bg-blue-500 text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-700;
  }
  .btn-outline-blue {
    @apply bg-transparent text-blue-700 font-semibold border border-blue-500 rounded;
  }
  .btn-outline-blue:hover {
    @apply bg-blue-500 text-white border-transparent;
  }
  .btn-disabled {
    @apply opacity-50 cursor-not-allowed;
  }
</style>