Tailwind CSS with Next.js

Utility Classes Instead of Custom CSS Files

Instead of writing custom CSS rules and switching between a component file and a stylesheet, Tailwind lets you build UI using small, composable utility classes directly in your JSX — flex, items-center, gap-4, text-lg, and thousands more, covering nearly every common CSS property.

create-next-app offers Tailwind as a setup option, automatically installing the dependency and generating a working tailwind.config.js plus the required directives in globals.css — no manual configuration is needed for a standard setup.

// If not chosen during create-next-app, install manually:
// npm install -D tailwindcss postcss autoprefixer
// npx tailwindcss init -p

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

// Usage in a component
export default function Card() {
  return (
    <div className="rounded-lg border p-4 shadow-sm">
      <h2 className="text-xl font-bold">Card Title</h2>
    </div>
  );
}

Tailwind's utility classes work identically in Server and Client Components — there's nothing special required for either.

tailwind.config.js Content Paths

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: { extend: {} },
  plugins: [],
};

• The content array tells Tailwind which files to scan for class names, so unused styles can be purged.
• Every folder containing components using Tailwind classes must be included in content.
• theme.extend is where you customize colors, spacing, and other design tokens without overwriting Tailwind's defaults.
• Tailwind classes require no import in individual component files — they're global utility classes.

Tailwind Cheat Sheet

Common utility class categories.

Responsive and State Variants

Tailwind's breakpoint prefixes (sm:, md:, lg:, xl:) and state variants (hover:, focus:, disabled:) apply a utility class only under specific conditions, letting you build fully responsive, interactive designs without leaving your JSX or writing media queries by hand.

<button className="bg-blue-500 hover:bg-blue-600 px-4 py-2 md:px-6 md:py-3">
  Click Me
</button>

This button is slightly larger on medium screens and up (md:), and darkens on hover.

Customizing the Design System

Rather than hardcoding raw color values throughout your JSX, extend Tailwind's theme with your project's actual design tokens, so class names like bg-brand map to your specific palette instead of Tailwind's generic defaults.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#0070f3",
      },
    },
  },
};

// Usage
<button className="bg-brand text-white">Submit</button>

Common Mistakes

• Forgetting to include a folder in tailwind.config.js's content array, causing its classes to be silently purged.
• Fighting Tailwind by writing large amounts of custom CSS alongside it instead of extending the theme.
• Not using responsive/state variants, hand-rolling separate mobile styles instead.
• Overusing arbitrary value syntax (w-[137px]) instead of sticking to the design system's spacing scale.

Key Takeaways

• Tailwind CSS provides utility classes directly usable in JSX, with no separate stylesheet needed per component.
• create-next-app can scaffold Tailwind automatically during project setup.
• The content array in tailwind.config.js must include every folder using Tailwind classes.
• Responsive (md:) and state (hover:) variants cover most conditional styling needs.
• Extend Tailwind's theme with your own design tokens instead of hardcoding raw values.