Technical reference

Tailwind CSS Cheatsheet

Utility-first styling for fast UI development

Must Know

html

Utilities are mobile-first: unprefixed styles apply everywhere.

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">...</div>

html

Include keyboard focus and disabled states.

<button class="bg-blue-600 hover:bg-blue-500 focus-visible:ring-2 disabled:opacity-50">Save</button>

html

min-w-0 allows flex children to shrink correctly.

<div class="flex min-w-0 items-center gap-3">
  <span class="shrink-0">Icon</span>
  <p class="truncate">Long content</p>
</div>

html

Choose system-driven or class-driven dark mode consistently.

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">...</div>

html

Consistent page gutters improve responsive layouts.

<main class="mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8">...</main>

html

Icon-only controls still need an accessible name.

<button><svg aria-hidden="true" /><span class="sr-only">Close dialog</span></button>

Tailwind must be able to discover complete class names.

// Avoid: `bg-${color}-500`
// Prefer complete class strings or a lookup map.

javascript

Centralize repeated variants instead of building class names at runtime.

const variants = {
  primary: "bg-blue-600 text-white",
  danger: "bg-red-600 text-white",
};