Install Flowbite Tailwind CSS with Vite React, Vue, Svelte

Flowbite

Create your project

  npm create vite@latest
  cd my-project

Install Tailwind CSS

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Install Flowbite

npm install flowbite flowbite-react

tailwind.config.js

module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {},
  },
  // eslint-disable-next-line no-undef
  plugins: [require('flowbite/plugin')],
}

Run Project

npm run dev