how to install tailwind css flowbite in vue 3

In this section we will install flowbite tailwind plugin in vue 3. Before we start we need install & setup vue 3 with tailwind css you can read official tailwind doc or you can read below article.

How to Install Tailwind CSS in Vue 3

Install Vite + Vue 3 + Typescript + Tailwind CSS 3

Tool Use

Tailwind CSS 3.x

Flowbite Vue 3

Vue 3

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>
setup flowbite in vue 3

setup flowbite in vue 3

For more details you can visit flowbite-vue