Next.js + Tailwind CSS: The Ultimate Integration Guide
Sarah Johnson
September 15, 2025 • 12 min read
Next.js and Tailwind CSS are a powerful pair for modern web development. This guide walks through configuring and optimizing your Next.js project with Tailwind CSS for maximum productivity and performance.
Why This Integration Matters
Next.js provides the perfect server-side rendering and static generation capabilities, while Tailwind CSS accelerates your styling process. Together, they enable developers to create performant, scalable applications with minimal CSS payload. This guide will cover:
- Setting up Tailwind in a Next project
- Optimizing for performance
- Using PostCSS plugins
- Responsive and dark mode configurations
Step-by-Step Installation
Let's create a new Next.js application and add Tailwind CSS:
npx create-next-app@latest nextjs-tailwind-integration
cd nextjs-tailwind-integration
npm install tailwindcss
Next, add the Tailwind directives to your globals.css file:
/* ./style/globals.css */
@tailwindcss
/* Your Tailwin directives can be added here */
Configuration Best Practices
Optimize your tailwind.config for common patterns:
// ./tailwindcss.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
display: ['"Inter"', 'sans-serif'],
body: ['"Inter"', 'sans-serif'],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
],
};
Then add the postcss.config.js file:
// ./postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Performance Optimizations
To get the most out of Tailwind in Next.js:
✅ Enable preflight for better CSS delivery
✅ Configure purge patterns to exclude dynamic class generation
✅ Use next.config.js loaders for postCSS
Next.js .next.config.js Setup
/** @type {import('next').NextConfig} */
const next_config = {
webpack: (config, { webpack, dev, buildId, nextRuntime }) => {
return config;
},
};
module.exports = next_config;
Adding Dark Mode Support
Use Tailwind's built-in dark mode features with these settings:
// tailwind.config.js
module.exports = {
theme: {
darkMode: 'class',
},
};
Then toggle dark mode manually or create a context provider in your app:
const DarkModeButton = () => {
const [darkMode, setDarkMode] = useState(false);
return (
<button
onClick={() => setDarkMode(!darkMode)}
className={darkMode ? 'dark' : 'light'}
>
Toggle Mode
</button>
);
};
Responsive Card Component
<div className="max-w-sm rounded-xl overflow-hidden shadow-lg">
<img className="w-full h-48 object-cover" src="https://via.placeholder.com/400x200" />
<div className="p-6">
<h2 className="text-xl font-bold mb-2 text-blue-600">Featured Project</h2>
<p className="text-gray-600">This is a responsive card built with Tailwins utility classes and Next.js</p>
<button className="mt-4 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full mt-4 transition">
View Project
</button>
</div>
</div>