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: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx}',
    'node_modules/flowbite/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')],
}

Test tailwind Flowbite in vue 3.

App.vue

<script setup>
import { Button } from 'flowbite-vue';
</script>
<template>
  <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
      </h1>
      <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>
    </div>
  </div>
</template>