Tailwind CSS

~20 min · Tailwind v4, PostCSS, @theme

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

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.

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>
  );
}

External links

Exercise

Bootstrap a fresh Next.js app with Tailwind v4. Define a custom --color-brand via @theme and use it in a button. Confirm dark mode classes work without extra config.