Setting Up Tailwind CSS with Next.js 14: Complete Guide
T
Team
·5 min read
#tailwindcss#nextjs#css#web development#styling
Setting Up Tailwind CSS with Next.js 14: Complete Guide
Tailwind CSS is a utility-first CSS framework that works perfectly with Next.js. Here's how to set it up:
Installation
Step 1: Install Dependencies
bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pStep 2: Configure Tailwind
Update tailwind.config.js:
javascript
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}Step 3: Add Tailwind to CSS
In app/globals.css:
css
@tailwind base;
@tailwind components;
@tailwind utilities;Customization
Custom Colors
javascript
theme: {
extend: {
colors: {
'brand': {
50: '#f0f9ff',
500: '#0ea5e9',
900: '#0c4a6e',
}
}
}
}Custom Components
Create reusable component classes:
css
@layer components {
.btn-primary {
@apply px-4 py-2 bg-gray-900 text-white rounded-lg;
}
}Best Practices
Your Tailwind CSS setup is now complete!
Share this article
Enjoyed this article?
Support our work and help us create more free content for developers.
Stay Updated
Get the latest articles and updates delivered to your inbox.