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

1npm install -D tailwindcss postcss autoprefixer
2npx tailwindcss init -p

Step 2: Configure Tailwind

Update tailwind.config.js:

javascript

1module.exports = {
2  content: [
3    './app/**/*.{js,ts,jsx,tsx,mdx}',
4    './components/**/*.{js,ts,jsx,tsx,mdx}',
5  ],
6  theme: {
7    extend: {},
8  },
9  plugins: [],
10}

Step 3: Add Tailwind to CSS

In app/globals.css:

css

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Customization

Custom Colors

javascript

1theme: {
2  extend: {
3    colors: {
4      'brand': {
5        50: '#f0f9ff',
6        500: '#0ea5e9',
7        900: '#0c4a6e',
8      }
9    }
10  }
11}

Custom Components

Create reusable component classes:

css

1@layer components {
2  .btn-primary {
3    @apply px-4 py-2 bg-gray-900 text-white rounded-lg;
4  }
5}

Best Practices

Use @apply sparingly

Prefer utility classes

Keep custom CSS minimal

Use Tailwind's JIT mode

Extract reusable patterns into components

Your Tailwind CSS setup is now complete!

Setting Up Tailwind CSS with Next.js 14: Complete Guide

Setting Up Tailwind CSS with Next.js 14: Complete Guide

Installation

Step 1: Install Dependencies

Step 2: Configure Tailwind

Step 3: Add Tailwind to CSS

Customization

Custom Colors

Custom Components

Best Practices

Enjoyed this article?

Stay Updated

Related Articles

Top 10 Must-Have Developer Tools in 2025

JSON Best Practices for Modern Applications