🎨Tailwind CSS

v4 utilities and config patterns worth memorizing.

Frameworks · 2 sections

Layout

Responsive grid

html

<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">{cards}</div>

Perfect centering

html

<div class="flex min-h-screen items-center justify-center">…</div>

Truncate with title

html

<p class="truncate" title={text}>{text}</p>

CSS-first configNo tailwind.config.js needed in v4

css

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.6 0.2 260);
  --font-display: "Inter", sans-serif;
}

Use a token

html

<button class="bg-brand font-display text-white">Go</button>