Follow this guide to learn how to set up Tailwind CSS v4 with Vue and Flowbite.

Follow the next steps to install Tailwind CSS (with v4) and Flowbite with Vue 3 and Vite.

1. Create a new Vite project running the following commands in your terminal:

npm create vite@latest flowbite-app -- --template vue cd flowbite-app

This guide uses the newest version of Tailwind CSS v4 which brings many improvements.

1. Install Tailwind CSS using Vite via the terminal:

npm install tailwindcss @tailwindcss/vite --save

2. Add the Tailwind plugin inside your vite.config.js file:

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import tailwindcss from '@tailwindcss/vite' // https://vite.dev/config/ export default defineConfig({ plugins: [ vue(), tailwindcss() ], })

3. Import the tailwind module inside your style.css file:

@import "tailwindcss";

You have now installed both Tailwind CSS and Vue and can proceed with the next steps.

The UI components from Flowbite can help you save time building websites with Vue and Tailwind. Make sure that you follow the next steps to ensure that you install both the CSS and JavaScript dependencies.

1. Install Flowbite as a dependency using NPM by running the following command:

npm install flowbite --save

2. Import the default theme variables from Flowbite inside your main input.css CSS file:

@import "flowbite/src/themes/default";

3. Import the Flowbite plugin file in your CSS:

@plugin "flowbite/plugin";

4. Configure the source files of Flowbite in your CSS:

@source "../node_modules/flowbite";

Now that you have successfully installed Vue, Tailwind CSS and Flowbite you can start importing and using components from the open-source library of Flowbite such as modals, navbars, tables, dropdowns, and more.

4. Start a local development server by running the following command in your terminal:

npm run dev

If you want to build the project then you can run npm run build.