Tailwind CSS

Tailwind CSS takes a different approach from every other option on this page: instead of writing CSS rules and giving them a class name, you compose a design directly in your markup out of small, single-purpose utility classes — flex, px-4, text-lg, bg-blue-500, and thousands more. It's one of the most popular styling choices in the Next.js ecosystem, and it's an official setup option in create-next-app.

Setup

The fastest path is answering "Yes" to Tailwind when scaffolding a new project.

Bash

npx create-next-app@latest my-app
# ✔ Would you like to use Tailwind CSS? … Yes

For an existing project, installing it manually takes just a few steps: install the packages, generate a config file, and point Tailwind at the files it should scan for class names.

Bash

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

tailwind.config.js

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

app/globals.css

CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

A worked example

components/Button.tsx

TSX

export default function Button({ children }: { children: React.ReactNode }) {
  return (
    <button
      type="button"
      className="rounded-md bg-blue-600 px-4 py-2 font-semibold text-white
                 transition-colors hover:bg-blue-700 focus:outline-none
                 focus:ring-2 focus:ring-blue-400"
    >
      {children}
    </button>
  )
}

Every visual property of that button — background color, padding, rounded corners, hover state, focus ring — is declared right where the component is defined, with no separate CSS file to open and no class name to invent.

Why it fits the Next.js ecosystem well

Zero-runtime — Tailwind compiles to plain CSS at build time via PostCSS, so it adds no client-side JavaScript, unlike runtime CSS-in-JS.
Its content scanning + purging step means only the utility classes actually used end up in the shipped CSS, keeping bundle size small.
Design tokens (spacing scale, color palette, breakpoints) live in one config file, giving teams consistency without a custom design system.
Colocating styles with markup avoids context-switching between a component file and a stylesheet.

Note

Tailwind works identically in Server and Client Components — since it's pure class names resolved to static CSS at build time, there's no client-side styling engine involved and no 'use client' requirement.

Tip

Extract a repeated cluster of utility classes into a small wrapper component (like the Button above) rather than repeating the same long className string everywhere — Tailwind doesn't discourage components, it just changes where the styling logic lives.

Tailwind is a utility-first CSS framework: you compose styles from small classes directly in markup.
It is an official setup option in create-next-app, or installable manually via tailwindcss/postcss/autoprefixer.
A build-time purge step keeps shipped CSS small by including only the classes actually used.
Being zero-runtime, it works the same in Server and Client Components.