Tailwind CSS
Tailwind is a utility-first CSS framework that create-next-app can set up for you.
className="px-4 py-2 rounded bg-blue-600"Tailwind CSS lets you style elements by composing small utility classes directly in your markup, with no separate CSS files per component. create-next-app offers to configure it during setup, or you can add it later.
How it feels
Instead of writing a .btn class, you apply utilities like px-4 py-2 rounded bg-blue-600 text-white right on the element.
Example
export default function Button() {
return (
<button className="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700">
Click me
</button>
);
}When to use it
- A developer builds a responsive card grid in minutes using Tailwind utility classes without writing any custom CSS.
- A team enforces a consistent design system by restricting styles to Tailwind's predefined scale of spacing and colour.
- A prototype is styled directly in JSX with Tailwind classes, then refined later without a separate stylesheet to manage.
More examples
Utility classes in JSX
Tailwind classes compose directly in className, removing the need for a separate CSS file for this component.
export default function Card({ title, body }: { title: string; body: string }) {
return (
<div className="rounded-lg border border-gray-200 p-6 shadow-sm">
<h2 className="text-xl font-semibold mb-2">{title}</h2>
<p className="text-gray-600 text-sm">{body}</p>
</div>
);
}Responsive layout with Tailwind
Tailwind's responsive prefixes (sm:, lg:) apply breakpoint-specific styles without media query blocks.
export default function Grid({ items }: { items: string[] }) {
return (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
{items.map(item => (
<div key={item} className="bg-white border rounded p-4">{item}</div>
))}
</div>
);
}Dark mode with Tailwind
Setting darkMode: 'class' in the config enables dark: prefixed utilities that activate when a dark class is on the html element.
// tailwind.config.ts
import type { Config } from 'tailwindcss';
export default {
content: ['./app/**/*.{ts,tsx}'],
darkMode: 'class',
} satisfies Config;
// Usage in JSX:
// <div className="bg-white dark:bg-gray-900 text-black dark:text-white">
Discussion