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.


Tool Use

Vue JS 3

Tailwind CSS 2.x



Setup Project

How to Install Tailwind CSS in Vue 3


Example 1

Simple vue js 3 tab with tailwind css.

<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>
// @ is an alias to /src
// import '../assets/tailwind.css';
import '@/assets/tailwind.css';

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


Example 2 (recommended)

Vue js 3 tab with tailwind css.

<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>
// @ is an alias to /src
// import '../assets/tailwind.css';
import '@/assets/tailwind.css';

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



Tags: