Build a Tabs in Vue 3 with Tailwind CSS

In this tutorial, we’ll build a simple working tab system in Vue 3 with Tailwind CSS. Additionally, we’ll create tabs using the Vue.js 3 Composition API.

Example 1

Simple Vue.js 3 tab system with Tailwind CSS.

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.

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>
vue tailwind tab

Example 3

Tailwind CSS Tab using vue js 3 composition api.

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>
tab composition api