Tailwind CSS

Why Tailwind is the default suggestion

Tailwind composes utility classes that compile down to one minimal CSS bundle per page. Works in Server and Client Components, integrates cleanly with next/font via CSS variables, and stays predictable across a team because the language is the same everywhere.

v4 setup is shorter than v3

v4 dropped the tailwind.config.js file. Configuration moved into CSS using @theme blocks. The PostCSS plugin auto-detects your source files. Setup is now: install, import, configure PostCSS, done.

Use Tailwind when a shared utility vocabulary makes composition and review faster. Establish tokens for color, type, spacing, and breakpoints, and extract a component when a repeated group represents product behavior rather than merely repeating several classes. Utility classes do not remove CSS decisions; they move those decisions into markup. Unbounded arbitrary values and copy-pasted class strings create a hidden design system that is harder to change than a named component. Build the same responsive element in several states, run the production build, and inspect the emitted CSS. Search for repeated class clusters and arbitrary values, then verify focus visibility, dark mode, and dynamic class names are present in the generated output.

Code

Install + wire up·bash

npm install tailwindcss @tailwindcss/postcss

app/globals.css·css

@import 'tailwindcss';

@theme {
  --color-brand: #2563eb;
  --font-display: 'Geist', system-ui, sans-serif;
}

postcss.config.mjs·ts

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

Use it in a Server Component·tsx

export default function Card({ title, children }: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm
                    transition-shadow hover:shadow-md
                    dark:border-gray-800 dark:bg-gray-900">
      <h2 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
        {title}
      </h2>
      <div className="text-gray-600 dark:text-gray-400">{children}</div>
    </div>
  );
}

Why Tailwind is the default suggestion

v4 setup is shorter than v3

Code

External links

Exercise

Progress

Comments 0