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: [
"./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>
For more details you can visit flowbite-vue