Tailwind CSS integration in NextJS

Introduction

Tailwind CSS helps you style your Next.js app quickly using ready-made classes. It saves time and keeps your design consistent.

You want to build a website with a clean, modern look fast.

You prefer writing styles directly in your HTML or JSX without separate CSS files.

You want responsive design that works well on phones and desktops.

You need to customize colors and spacing easily across your app.

You want to avoid writing repetitive CSS code.

Syntax

NextJS

1. Install Tailwind CSS and its dependencies:
   npm install -D tailwindcss postcss autoprefixer

2. Initialize Tailwind config files:
   npx tailwindcss init -p

3. Configure tailwind.config.js to include your files:
   module.exports = {
     content: ["./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
     theme: {
       extend: {},
     },
     plugins: [],
   }

4. Add Tailwind directives to your global CSS (e.g., styles/globals.css):
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

The content array tells Tailwind which files to scan for class names.

Use the @tailwind directives in your main CSS file to include Tailwind styles.

Examples

This example adds a custom color named brand to use in your app.

NextJS

/* tailwind.config.js */
module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        brand: '#1c64f2',
      },
    },
  },
  plugins: [],
}

This CSS file includes all Tailwind styles for your app.

NextJS

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Example JSX using Tailwind classes for background color, text color, padding, and rounded corners.

NextJS

<div className="bg-brand text-white p-4 rounded">
  Welcome to Tailwind CSS in Next.js!
</div>

Sample Program

This is a simple Next.js page using Tailwind CSS classes for layout, colors, and typography. The global CSS imports Tailwind styles.

NextJS

/* tailwind.config.js */
module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* app/page.jsx */
import './globals.css';

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600">Hello, Tailwind CSS!</h1>
      <p className="mt-4 text-gray-700">This is a Next.js app styled with Tailwind.</p>
    </main>
  );
}

Important Notes

Run npm run dev to start your Next.js app and see Tailwind styles applied.

Use browser DevTools to inspect elements and see Tailwind classes in action.

Tailwind works well with responsive design using prefixes like sm:, md:, lg:.

Summary

Tailwind CSS lets you style Next.js apps quickly with utility classes.

Install Tailwind, configure tailwind.config.js, and import styles in your app.

Use Tailwind classes in JSX to build responsive, consistent UI easily.