Tailwind Cheat Sheet / Utility Builder

What Is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. Instead of writing component-specific CSS or using predefined classes like .btn, you compose layouts and styles from small, single-purpose utilities like flex, p-4, and text-gray-700. Tailwind uses atomic classes instead of component abstractions because composition gives you flexibility without leaving your markup.

How Tailwind Utility Classes Work

Each Tailwind class maps to one CSS property. flex sets display: flex; gap-4 sets gap: 1rem. This atomic approach means you compose over abstract. Your markup might look "long" with many classes, but you avoid naming things, you get consistent design tokens, and Tailwind purges unused styles in production. Classes scale better than bespoke component CSS because you reuse the same utilities everywhere.

Common Tailwind Layout Patterns

Stack: Vertical layout with consistent gap. Use flex flex-col gap-4 for stacked content like forms or lists.

<div class="flex flex-col gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Card: A container with padding, rounded corners, and shadow. Use bg-white rounded-lg shadow p-4 space-y-2 for cards, panels, or modals.

<div class="bg-white rounded-lg shadow p-4 space-y-2">
  <h3>Title</h3>
  <p>Content</p>
</div>

Horizontal bar: Flex row with items centered and space between. Use flex items-center justify-between gap-4 for headers, nav bars, or inline actions.

Tailwind Spacing Best Practices

Prefer gap over margin for layout spacing. gap-4 between flex/grid children is more predictable than mb-4 on each child. Use the spacing scale (p-2, p-4, gap-4, etc.) consistently instead of mixing arbitrary values. The Spacing Scale Assistant helps you choose consistent spacing tokens for your design system.

Common Tailwind Mistakes

• Overusing arbitrary values — w-[347px] and p-[13px] bypass the design system. Use standard tokens when possible.
• Inconsistent spacing — Mixing p-3, p-5, gap-2, m-4 without a plan leads to visual noise. Stick to a spacing scale.
• Too many responsive overrides — md:flex lg:grid xl:block is hard to maintain. Start mobile-first, add breakpoints sparingly.
• Not using gap — Margin hacks between children are fragile. flex gap-4 is cleaner.
• Over-nesting divs — Extra wrappers add complexity. Flatten when you can.

When Tailwind Is (and Isn't) a Good Choice

Tailwind shines for rapid prototyping, design systems with shared tokens, and teams that value consistency over abstraction. It works well with component frameworks like React because styles live in the component file. Tailwind is less ideal when you need highly dynamic styles (use inline styles or CSS variables), when designers hand off pixel-perfect CSS (you may fight the system), or when your team strongly prefers BEM or CSS-in-JS. For decorative effects like gradients or shadows, tools like the Box Shadow Generator, Border Radius Generator, and CSS Gradient Generator can produce Tailwind-friendly output.

Tailwind Cheat Sheet vs Official Docs

Use a curated cheat sheet when you need speed: pick utilities, see patterns, copy and go. Use the official Tailwind docs when you need completeness: every variant, every plugin, configuration, and edge cases. This tool focuses on composition and real usage — the 20% of classes that cover 80% of layouts. Official docs are the source of truth. Use this for fast iteration; use docs when you hit a wall or need something niche.