Home/ Questions/Q 8892

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 60k
Asked: 2024-11-28T05:20:07+00:00

How To Install Flowbite Tailwind In React

  • 60k

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

reacttailwindcsstypescriptwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,