Building Reusable Vue 3 Button Component Using Tailwind CSS

In this section we will create vue js 3 reusable button component using tailwind css 2.2 and tailwind css 3.

Tool Use

Vue 3

Tailwind CSS 2.x & 3.x

First you need to setup vue 3 project with tailwind css. You can install manually or you read below blog.

How to Install Tailwind CSS in Vue 3

First you need to create button component.

src/components/Button.vue

<template>
  <button
    :type="type"
    class="
      px-6
      py-2
      font-semibold
      text-white
      bg-blue-500
      rounded-md
      hover:opacity-95
      focus:outline-none">
    <slot />
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    type: {
      type: String,
      default: 'save',
    },
  },
};
</script>

Once your tailwind button component ready you can use in view file like

src/views/your-view-file.vue

<template>
  <div class="container mx-auto">
    <div class="lg:gap-4 lg:flex">
      <Button>Primary</Button>
      <Button class="bg-gray-500">Secondary</Button>
      <Button class="bg-green-500">Success</Button>
      <Button class="bg-red-500">Danger</Button>
      <Button class="bg-yellow-500">Warning</Button>
      <Button class="bg-blue-400">Info</Button>
      <Button class="text-gray-700 bg-gray-100">Light</Button>
      <Button class="bg-gray-800">Dark</Button>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import Button from '../components/Button.vue';

export default {
  components: {
    Button,
  },
};
</script>

Building Reusable Vue 3 Button Component Using Tailwind CSS

Now, run npm

npm run dev 

Read Also

Vue 3 Dark Mode with Tailwind CSS Example

Install Vite + Vue 3 + Typescript + Tailwind CSS 3

How to Install Tailwind CSS in Vue 3

How to install Bootstrap 5 in Vue 3

Vue 3 Responsive Navbar Menu With Tailwind CSS Example

Vue 3 Dropdown With Tailwind CSS Examples

Tailwind CSS Vue 3 Table Example

Tailwind CSS Vue 3 Modal Examples