Install Tailwind Flowbite In Next.JS 13

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>
    </>
  );
}

flowbite with nextjs