Tailwind Config for Next.js Projects
Optimal tailwind.config.js setup for Next.js 13+ App Router with content paths, font integration, dark mode, and TypeScript type safety.
Framework
Detailed Explanation
Tailwind Config for Next.js
Next.js has specific requirements for Tailwind configuration, especially with the App Router introduced in Next.js 13.
Complete Next.js Config
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
fontFamily: {
sans: ["var(--font-geist-sans)"],
mono: ["var(--font-geist-mono)"],
},
},
},
plugins: [],
};
Font Integration with next/font
Next.js optimizes fonts at build time. Combine with Tailwind:
// app/layout.tsx
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
export default function RootLayout({ children }) {
return (
<html className={GeistSans.variable + " " + GeistMono.variable}>
<body className="font-sans">{children}</body>
</html>
);
}
Content Paths for App Router
If you use the src/ directory pattern:
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"]
If your files are at the root:
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
]
TypeScript Config
For type-safe configuration:
// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
theme: { extend: {} },
plugins: [],
};
export default config;
Dark Mode with next-themes
The popular next-themes library works perfectly with darkMode: "class". It handles theme persistence and system preference detection.
Use Case
Use this configuration as a starting template when initializing Tailwind CSS in a new Next.js 13+ project with the App Router.