TheLazy.Dev
Portfolio GitHub

Blog

tailwindcss |react |typescript |webdev

How To Install Flowbite Tailwind In React

saim_ansari

saim

Posted on October 9, 2022

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

💖 💪 🙅 🚩
saim_ansari
saim

Posted on October 9, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to apply responsive font sizes in Tailwind
tailwindcss How to apply responsive font sizes in Tailwind

December 24, 2022

How To Install Flowbite Tailwind In React
tailwindcss How To Install Flowbite Tailwind In React

October 9, 2022