How to Install Tailwind CSS Flowbite in Vue 3

In this section, we’ll install the Flowbite Tailwind plugin in Vue 3. Before we start, we need to install and set up Vue 3 with Tailwind CSS. You can refer to the official Tailwind documentation or read the article below for guidance.

Install Flowbite in Vue 3

Install flowbite and flowbite-vue as a dependency using NPM by running the following command:

npm i flowbite flowbite-vue

Require Flowbite as a plugin inside the tailwind.config.js and add flowbite-vue dist folder to tailwind content:

tailwind.config.cjs or tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
  theme: {
    extend: {},
  plugins: [require('flowbite/plugin')],

Test tailwind Flowbite in vue 3.

<script setup>
import { Button } from 'flowbite-vue';
  <div class="flex items-center justify-center h-screen">
    <div class="space-x-2">
      <h1 class="mb-4 text-2xl text-center text-green-400">
        Install Tailwind CSS Flowbite in Vue 3
      <Button color="default">Default</Button>
      <Button color="alternative">Alternative</Button>
      <Button color="dark">Dark</Button>
      <Button color="light">Light</Button>
      <Button color="green">Green</Button>
      <Button color="red">Red</Button>
      <Button color="yellow">Yellow</Button>
      <Button color="purple">Purple</Button>
 flowbite in vue 3