How To Install Flowbite Tailwind In React

In this section we will install & setup flowbite tailwind in react using vite tool. This tutorial will walk you through the installation and configuration process of Flowbite Tailwind in React. Flowbite contains a lot of components like Card, Button, Alerts and much more.

Create React Project Using Vite

Install react vite via npm:

npm create vite@latest

Select react.

✔ Project name: … flowbite-react
? Select a framework: › - Use arrow-keys. Return to submit.
  vanilla
  vue
❯  react
  preact
  lit
  svelte

Next choose typescript.

✔ Select a framework: › React
? Select a variant: › - Use arrow-keys. Return to submit.
  JavaScript
❯  TypeScript

Move to project and install & run npm:

cd flowbite-react
npm install
npm run dev

Install Tailwind CSS in React

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

tailwind.config.js or tailwind.config.cjs

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css

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

Install Flowbite Tailwind CSS in React

To install Tailwind Flowbite in React, run the following command in your terminal:

npm i flowbite flowbite-react

Next, you need to add it as a plugin inside your tailwind.config.js or tailwind.config.cjs file . The Process is easy: open your config file and add the line below:

tailwind.config.js or tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

Test Flowbite React Components

src/App.tsx

import { Card } from 'flowbite-react';
import React from 'react';

function App() {
  return (
    <div className="h-screen flex justify-center items-center flex-col">
      <h1 className="text-2xl font-bold text-blue-600 mb-8 border-b-4 border-purple-600">
        Install Vite + React + Flowbite
      </h1>
      <div className="max-w-sm">
        <Card imgSrc="https://flowbite.com/docs/images/blog/image-1.jpg">
          <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
            Install & setup flowbite in react js
          </h5>
          <p className="font-normal text-gray-700 dark:text-gray-400">
            Here are the biggest enterprise technology acquisitions of 2021 so
            far, in reverse chronological order.
          </p>
        </Card>
      </div>
    </div>
  );
}

export default App;