Tailwind is a utility-first CSS framework offering low-level classes for custom design.
Install it:
pnpm add -D tailwindcss @tailwindcss/postcssConfigure postcss.config.mjs:
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}Import Tailwind in app/globals.css:
@import 'tailwindcss';Then import globals.css in your root layout:
import './globals.css'Now you can use Tailwind classes:
<h1 className="text-4xl font-bold">Welcome to Next.js!</h1>CSS Modules scope styles locally to avoid naming conflicts. Create a file with .module.css:
// app/blog/blog.module.css
.blog {
padding: 24px;
}// app/blog/page.tsx
import styles from './blog.module.css'
<main className={styles.blog}></main>Use global styles for base layout and typography. Create app/global.css and import it in your layout:
// app/global.css
body {
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}// app/layout.tsx
import './global.css'Tip: Use global styles only for truly global rules. Use Tailwind or CSS Modules for component-specific styling.
You can import styles from external packages like Bootstrap:
import 'bootstrap/dist/css/bootstrap.css'In React 19, you can also use <link rel="stylesheet" />.
Next.js merges and chunks CSS during production builds. The order of imports determines the final CSS order:
// page.tsx
import { BaseButton } from './base-button'
import styles from './page.module.css'base-button.module.css will be loaded before page.module.css.
name.module.cssnext build