Install Tailwind CSS
Install Tailwind CSS with Next.js (v3 and v4)
Tailwind CSS v4 Installation
Create your project
npx create-next-app@latest my-project --typescript --eslint
cd my-projectInstall Tailwind CSS
npm install tailwindcss @tailwindcss/postcss @tailwindcss/cliCreate your CSS file
Create a new CSS file (e.g., app/globals.css) and add the Tailwind import:
@import "tailwindcss";
@theme inline {
/* Configure your theme variables here */
--font-display: "Inter", "sans-serif";
--color-primary-500: oklch(0.84 0.18 117.33);
--spacing: 0.25rem;
}Configure PostCSS
Update your PostCSS configuration:
module.exports = {
plugins: {
"@tailwindcss/postcss": {},
},
};Start your build process
npm run devStart using Tailwind
export default function Home() {
return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}Tailwind CSS v3 Installation (Legacy)
Create your project
npx create-next-app@latest my-project --typescript --eslint
cd my-projectInstall Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pConfigure your template paths
/** @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
@tailwind base;
@tailwind components;
@tailwind utilities;Start your build process
npm run devStart using Tailwind
export default function Home() {
return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}Key Differences in v4
- CSS-First Configuration: Theme configuration is now done in CSS using the
@theme inlinedirective instead oftailwind.config.js - New Import Syntax: Use
@import "tailwindcss"instead of the three@tailwinddirectives - Package Changes:
- PostCSS plugin is now
@tailwindcss/postcss - CLI is now
@tailwindcss/cli
- PostCSS plugin is now
- Native CSS Cascade Layers: Uses real CSS
@layerinstead of Tailwind's custom implementation - CSS Variables: All design tokens are available as CSS variables (e.g.,
--color-blue-500,--font-sans)
For more advanced configuration options in v4, you can:
/* Custom utilities */
@utility container {
margin-inline: auto;
padding-inline: 2rem;
}
/* Custom variants */
@variant dark (&:where(.dark, .dark *));
/* Add plugins */
@plugin "@tailwindcss/typography";Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
