Tailwind CSS — Utility-first Styling Skill
When to use
- Rapid UI building with consistent spacing/typography scales
- Design systems where composition beats bespoke CSS
- Component-driven apps (React/Vue/Svelte), marketing pages, prototypes → production
Key concepts & patterns
- Utilities compose in HTML/JSX:
class="flex gap-4 p-6 bg-zinc-950 text-white" - Responsive variants:
sm: md: lg: xl:etc. - State variants:
hover:,focus:,active:,disabled:,group-hover:,peer-checked: - Arbitrary values (use sparingly):
w-[42rem],bg-[#0b1220],translate-y-[3px] - Dark mode patterns:
dark:with class-based strategy - Extracting repeated patterns:
- Prefer components (JSX/Vue components) first - Then @apply for small reusable patterns (avoid overuse)
- Build pipeline:
- Tailwind scans “content” files for class names and generates CSS (zero-runtime)
Common pitfalls
- Classes not generated in production
- Ensure content paths include all templates/components. - Avoid building class names dynamically (e.g. "text-" + color) unless safelisted.
- Overusing
@applyand losing the utility-first benefits - Conflicting styles due to class order assumptions
- Huge HTML class lists with no structure
- Use component composition; break into subcomponents; use clsx/cva when needed.
Quick recipes
1) A clean CTA button
<button class="inline-flex items-center justify-center rounded-xl px-5 py-3
bg-indigo-600 text-white font-medium
hover:bg-indigo-500 active:bg-indigo-700
focus:outline-none focus:ring-2 focus:ring-indigo-400/60">
Get started
</button>2) Responsive hero layout
<section class="mx-auto max-w-6xl px-6 py-16">
<div class="grid gap-10 lg:grid-cols-2 lg:items-center">
<div>
<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">
Ship a beautiful site fast.
</h1>
<p class="mt-4 text-zinc-600">
Tailwind helps you move quickly without fighting CSS.
</p>
</div>
<div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
<!-- media -->
</div>
</div>
</section>3) Handling dynamic classnames safely
Prefer mapping:
const toneClass = {
success: "bg-emerald-600",
danger: "bg-rose-600",
info: "bg-sky-600",
}[tone];What to ask the user
- Framework/build tool (Next/Vite/Remix/Webflow export)?
- Do we need a design system (tokens, component library) or a one-off page?
- Dark mode? RTL? accessibility constraints?