DEV Community

Cover image for How To Install Flowbite Tailwind In React
saim
saim

Posted on • Originally published at larainfo.com

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


Enter fullscreen mode Exit fullscreen mode

Select react.



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


Enter fullscreen mode Exit fullscreen mode

Next choose typescript.



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


Enter fullscreen mode Exit fullscreen mode

Move to project and install & run npm:



cd flowbite-react
npm install
npm run dev


Enter fullscreen mode Exit fullscreen mode

Install Tailwind CSS in React



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


Enter fullscreen mode Exit fullscreen mode

tailwind.config.js or tailwind.config.cjs



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


Enter fullscreen mode Exit fullscreen mode

index.css



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


Enter fullscreen mode Exit fullscreen mode

Install Flowbite Tailwind CSS in React

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



npm i flowbite flowbite-react


Enter fullscreen mode Exit fullscreen mode

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')
  ],
}


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

tailwind flowbite components card  in reactjs

Top comments (0)