Use this Tailwind CSS cheatsheet to recall layout, spacing, color, typography, button, card and responsive prefix utilities, with copyable class strings and generated HTML examples.
flex items-center justify-betweengrid grid-cols-3 gap-4mx-auto max-w-6xl px-4hidden md:blockp-4 px-6 py-3m-4 mt-8 mx-autow-full max-w-mdh-12 min-h-screentext-3xl font-bold tracking-tighttext-slate-600bg-white dark:bg-slate-950rounded-lg border shadow-smCompare the syntax with a small rendered example so the reference is easier to scan and remember.
Compose flex, alignment and gap utilities for common rows.
<div class="flex items-center justify-between gap-4">
<span>Logo</span>
<span>Docs</span>
<strong>Start</strong>
</div>flex items-center justify-between gap-4Tailwind spacing utilities map to a consistent scale.
<div class="p-4 rounded-lg border bg-white">
Content
</div>p-4Combine text size, weight and color utilities for hierarchy.
<h2 class="text-2xl font-bold tracking-tight text-blue-600">Heading</h2>
<p class="text-slate-600">Supporting copy.</p>text-2xl font-bold tracking-tight text-blue-600 text-slate-600Readable utility typography.
Cards usually combine radius, border, background, padding and shadow.
<div class="rounded-lg border bg-white p-4 shadow-sm">
<h3 class="font-bold">Utility card</h3>
<p class="mt-2 text-slate-600">Rounded, bordered and spaced.</p>
<button class="mt-4 rounded-full bg-blue-600 px-4 py-2 text-white">Button</button>
</div>rounded-lg border bg-white p-4 shadow-sm mt-4 rounded-full bg-blue-600 px-4 py-2 text-whitep-4 rounded border shadow-sm.
Use breakpoint prefixes to progressively enhance layout.
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<article>One</article>
<article>Two</article>
<article>Three</article>
</div>grid gap-4 md:grid-cols-2 lg:grid-cols-3Short notes to help you decide when to use each pattern, avoid common mistakes and copy the examples with confidence.
<div class="rounded-lg border bg-white p-6 shadow-sm md:p-8">
<h2 class="text-2xl font-bold tracking-tight">Title</h2>
<p class="mt-2 text-slate-600">Supporting copy.</p>
</div>Tailwind CSS Cheatsheet includes quick reference sections, practical examples, common mistakes, tips and links to related DevKitYard tools.
Yes. This cheatsheet includes visual examples with copyable code and lightweight controls where interaction helps explain the pattern.
Use it when you need to recall syntax, compare common patterns or avoid mistakes without opening a long tutorial.
Use related DevKitYard tools such as Tailwind Button Builder, React Component Generator when you need to format, validate, generate or inspect real output.