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:
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
Configure PostCSS
Create a postcss.config.mjs file at your project root.const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;
Add the Tailwind import
Add the import to your main CSS file.@import "tailwindcss";
@theme {
/* Customize your theme here */
--font-sans: "Inter", sans-serif;
}
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
Configure content paths
Update tailwind.config.ts to include all files 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}",
],
darkMode: "class",
theme: {
extend: {},
},
plugins: [],
};
export default config;
Add Tailwind directives
@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:
@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
