Docs
Install Next.js

Install Next.js

Install and configure BuouUI Components


Create a new project

npx create-next-app@latest my-project --typescript --eslint
cd my-project

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths

Add the following to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add the Tailwind directives to your CSS

Add the following to your globals.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Start your build process

npm run dev

Start using Tailwind

export default function Home() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}