DEV Community

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

Posted on • Originally published at larainfo.com

3

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

Image of Datadog

Learn how to monitor AWS container environments at scale

In this eBook, Datadog and AWS share insights into the changing state of containers in the cloud and explore why orchestration technologies are an essential part of managing ever-changing containerized workloads.

Download the eBook

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more