Build A Simple Tabs with Tailwind CSS & Vue 3

In this tutorial, we will build a simple working tabs in Vue 3 with Tailwind CSS, also create Tab using vue js 3 composition api.

Tool Use

Vue JS 3 and Vue 3 composition api.

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

Quick Way to Start Project with Vite Vue 3 Headless UI Tailwind CSS

Example 1

Simple vue js 3 tab with tailwind css.

Tab.vue

<template>
  <div>
    <h2 class="font-bold text-blue-900 text-1xl">Vue Js Simple Tabs</h2>
    <div class="container mx-auto">
      <ul class="flex justify-center space-x-2 text-white">
        <li>
          <button
            @click="activeTabOne"
            class="inline-block px-4 py-2 bg-purple-500"
          >
            Tab 1
          </button>
        </li>
        <li>
          <button
            @click="activeTabTwo"
            class="inline-block px-4 py-2 bg-purple-500"
          >
            Tab 2
          </button>
        </li>
        <li>
          <button
            @click="activeTabThree"
            class="inline-block px-4 py-2 bg-purple-500"
          >
            Tab 3
          </button>
        </li>
      </ul>
      <div class="p-3 mt-6 bg-white border">
        <div v-show="tab === 1">
          Tab 1 Content show Lorem ipsum dolor sit amet consectetur adipisicing
          elit.
        </div>
        <div v-show="tab === 2">
          Tab 2 Content show Lorem ipsum dolor sit amet consectetur, adipisicing
          elit.
        </div>
        <div v-show="tab === 3">
          Tab 3 Content show Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Amet,
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tab: 1,
    };
  },
  methods: {
    activeTabOne() {
      this.tab = 1;
    },
    activeTabTwo() {
      this.tab = 2;
    },
    activeTabThree() {
      this.tab = 3;
    },
  },
};
</script>

Example 2

Vue js 3 tab with tailwind css.

Tab.vue

<template>
  <div>
    <h2 class="font-bold text-blue-900 text-1xl">Vue Js tabs</h2>
    <div class="container mx-auto">
      <ul class="flex justify-center space-x-2 text-white">
        <li>
          <button
            @click="currentTab(1)"
            class="inline-block px-4 py-2 bg-blue-500"
          >
            Tab 1
          </button>
        </li>
        <li>
          <button
            @click="currentTab(2)"
            class="inline-block px-4 py-2 bg-blue-500"
          >
            Tab 2
          </button>
        </li>
        <li>
          <button
            @click="currentTab(3)"
            class="inline-block px-4 py-2 bg-blue-500"
          >
            Tab 3
          </button>
        </li>
      </ul>
      <div class="p-3 mt-6 bg-white border">
        <div v-if="tab === 1">
          Tab 1 Content show Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Quas sunt ducimus numquam! Quam, perspiciatis!
        </div>
        <div v-if="tab === 2">
          Tab 2 Content show Lorem ipsum dolor sit amet consectetur, adipisicing
          elit. aliquam rem. Exercitationem corporis eius voluptatibus.
        </div>
        <div v-if="tab === 3">
          Tab 3 Content show Lorem ipsum dolor sit amet consectetur adipisicing
          elit.
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      tab: 1,
    };
  },
  methods: {
    currentTab: function (tabNumber) {
      this.tab = tabNumber;
    },
  },
};
</script>

Build A Simple Tabs with Tailwind CSS & Vue 3

Example 3

Tailwind CSS Tab using vue js 3 composition api.

Tab.vue

<template>
  <div>
    <h2 class="mb-4 font-bold text-center text-blue-900 text-1xl">Tailwind  CSS Tab using vue js 3 composition api.</h2>
    <div class="container mx-auto">
      <ul class="flex justify-center space-x-2 text-white ">
        <li>
          <button
            @click="currentTab(1)"
            class="inline-block px-4 py-2 bg-blue-500 focus:outline-none"
          >
            Tab 1
          </button>
        </li>
        <li>
          <button
            @click="currentTab(2)"
            class="inline-block px-4 py-2 bg-blue-500 focus:outline-none"
          >
            Tab 2
          </button>
        </li>
        <li>
          <button
            @click="currentTab(3)"
            class="inline-block px-4 py-2 bg-blue-500 focus:outline-none"
          >
            Tab 3
          </button>
        </li>
      </ul>
      <div class="p-3 mt-6 text-center bg-white">
        <div v-if="tab === 1">
          Tab 1 Content show Lorem ipsum dolor sit amet consectetur adipisicing
          elit. Quas sunt ducimus numquam! Quam, perspiciatis!
        </div>
        <div v-if="tab === 2">
          Tab 2 Content show Lorem ipsum dolor sit amet consectetur, adipisicing
          elit. aliquam rem. Exercitationem corporis eius voluptatibus.
        </div>
        <div v-if="tab === 3">
          Tab 3 Content show Lorem ipsum dolor sit amet consectetur adipisicing
          elit.
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const tab = ref(1);
    const currentTab = (tabNumber) => (tab.value = tabNumber);
    return { tab, currentTab };
  },
};
</script>

Build A Simple Tabs with Tailwind CSS & Vue 3 v2

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