Install Tailwind CSS

Install packages

Install the necessary packages including the new CLI and PostCSS plugin.

npm install tailwindcss @tailwindcss/postcss @tailwindcss/cli

Configure PostCSS

Add a postcss.config.mjs (or .js) file to your project root.

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

Import Tailwind CSS

Add the import to your main CSS file (e.g., app/globals.css).

@import "tailwindcss";

@theme {
  /* Customize your theme here */
  --font-sans: "Inter", sans-serif;
  --color-primary: oklch(0.6 0.2 240);
}

Run your project

npm run dev

Install packages

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

Configure paths

Update your tailwind.config.ts to include all file paths that use Tailwind classes.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
export default config;

Add directives

Add the Tailwind directives to your app/globals.css.

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