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;
Top comments (0)