In this section we will see how to use tailwind flowbite in nextjs 13. Before install flowbite we need to setup tailwind css in nextjs.
Install Tailwind CSS In NextJS 13
Create Nextjs App
npx create-next-app my-project
# or
npx create-next[email protected]
# or
yarn create next-app
# or
npx create-next[email protected] --typescript
# or
yarn create next-app --typescript
Move to project
cd my-project
Install Tailwind CSS
Run below command to install tailwind css and generate tailwind.config.js and postcss.config.js.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Add config path in tailwind.config.js
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Remove globals.css code and Add tailwind directives to your globals css
styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Install FlowBite in Next.js 13
install flowbite via npm:
npm install flowbite flowbite-react --save
Next add flowbite plugin and ./node_modules/flowbite-react/**/*.js path.
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./node_modules/flowbite-react/**/*.js",
],
theme: {
extend: {},
},
plugins: [require("flowbite/plugin")],
};
Now test flowbite components with nextjs
import { Alert } from "flowbite-react";
export default function Home() {
return (
<>
<div className="flex items-center justify-center h-screen">
<Alert color="info">
<span>
<span className="font-medium">Flowbite </span>
with NextJS using Tailwind CSS
</span>
</Alert>
</div>
</>
);
}