Tailwind CSS (v4)

Overview

Tailwind CSS is a utility-first CSS framework. Style by combining single-purpose classes in markup.

We use Tailwind v4 only. There is no tailwind.config.js, tailwind.config.ts, or tailwind.config.mjs. Configuration is done in CSS via @import "tailwindcss" and the @theme directive, plus the Vite or PostCSS plugin.

• Entry: One main CSS file with @import "tailwindcss";
• Build: @tailwindcss/vite (Vite) or @tailwindcss/postcss (Next.js)
• Theme: @theme { ... } in that same CSS file (or imported CSS). No JS config.

Core principle: Prefer utility classes in markup; extend with @theme and custom CSS when needed. Never suggest or create tailwind.config.* or content/theme in a config file.

Installation

Next.js (App Router, 15+)