Install Tailwind CSS

Auto-generate your docs

If you created your project with create-next-app and selected Tailwind CSS (the default), Tailwind CSS 4 is already installed and configured. You can verify this and move on to Add Utilities.

Tailwind CSS v4 ships with Next.js by default as of Next.js 15+. The configuration is now CSS-first — there is no tailwind.config.ts file unless you create one.

Verify your setup

Check that app/globals.css contains the Tailwind import:

app/globals.css

@import "tailwindcss";

If you see this line, Tailwind CSS 4 is active. No further configuration is needed to use RareUI components.

Tailwind CSS 4 (manual setup)

If you are adding Tailwind CSS 4 to an existing project that was not created with create-next-app, follow these steps.

Install packages

npm install tailwindcss @tailwindcss/postcss @tailwindcss/cli

pnpm add tailwindcss @tailwindcss/postcss @tailwindcss/cli

yarn add tailwindcss @tailwindcss/postcss @tailwindcss/cli

bun add tailwindcss @tailwindcss/postcss @tailwindcss/cli

Configure PostCSS

Create a postcss.config.mjs file at your project root.

postcss.config.mjs

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

Add the Tailwind import

Add the import to your main CSS file.

app/globals.css

@import "tailwindcss";

@theme {
  /* Customize your theme here */
  --font-sans: "Inter", sans-serif;
}

Start the dev server

npm run dev

Tailwind CSS 3 (legacy)

If you are using Tailwind CSS v3 in an existing project and cannot upgrade yet, follow these steps.

Install packages

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

pnpm add -D tailwindcss postcss autoprefixer
pnpm dlx tailwindcss init -p

yarn add -D tailwindcss postcss autoprefixer
yarn dlx tailwindcss init -p

bun add -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p

Configure content paths

Update tailwind.config.ts to include all files that use Tailwind classes.

tailwind.config.ts

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}",
  ],
  darkMode: "class",
  theme: {
    extend: {},
  },
  plugins: [],
};
export default config;

Add Tailwind directives

app/globals.css

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

Key differences between v3 and v4

Feature	v3	v4
Configuration	`tailwind.config.ts` (JavaScript)	`@theme {}` block in CSS
Import	`@tailwind base/components/utilities`	`@import "tailwindcss"`
PostCSS plugin	`tailwindcss`	`@tailwindcss/postcss`
Build speed	Baseline	Significantly faster

Dark mode CSS variables

RareUI components use CSS variables for dark mode. Add these to your globals.css to support both light and dark themes:

app/globals.css

@import "tailwindcss";

@layer base {
  :root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --border: oklch(0.922 0 0);
    --muted: oklch(0.961 0 0);
    --muted-foreground: oklch(0.556 0 0);
  }

  .dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --border: oklch(0.269 0 0);
    --muted: oklch(0.205 0 0);
    --muted-foreground: oklch(0.708 0 0);
  }
}

RareUI components reference these variables (e.g., bg-background, text-foreground, border-border) so they automatically adapt to light and dark modes without any extra configuration on your part.

Next steps

Add utilities — install animation dependencies and the cn() helper
CLI — add components with a single command

⌘I

Get Started

Installation

Install Tailwind CSS

Verify your setup

Tailwind CSS 4 (manual setup)

Tailwind CSS 3 (legacy)

Key differences between v3 and v4

Dark mode CSS variables

Next steps

​Verify your setup

​Tailwind CSS 4 (manual setup)

​Tailwind CSS 3 (legacy)

​Key differences between v3 and v4

​Dark mode CSS variables

​Next steps

Verify your setup

Tailwind CSS 4 (manual setup)

Tailwind CSS 3 (legacy)

Key differences between v3 and v4

Dark mode CSS variables

Next steps