Tailwind CSS Cheat Sheet: Every Utility Class You Need

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that lets you build designs directly in your HTML using pre-defined classes. Instead of writing custom CSS, you compose designs from small, single-purpose utilities.

<!-- Traditional CSS -->
<div class="card">
  <h2 class="card-title">Hello</h2>
</div>

<!-- Tailwind CSS -->
<div class="bg-white rounded-xl shadow-lg p-6">
  <h2 class="text-xl font-bold text-gray-900">Hello</h2>
</div>

Spacing (Margin & Padding)

Tailwind uses a consistent spacing scale based on 0.25rem (4px) increments:

Class	Value	Pixels
p-0	0	0px
p-1	0.25rem	4px
p-2	0.5rem	8px
p-3	0.75rem	12px
p-4	1rem	16px
p-5	1.25rem	20px
p-6	1.5rem	24px
p-8	2rem	32px
p-10	2.5rem	40px
p-12	3rem	48px
p-16	4rem	64px
p-20	5rem	80px

Directional Padding/Margin

p-4     → all sides
px-4    → left + right (x-axis)
py-4    → top + bottom (y-axis)
pt-4    → top only
pr-4    → right only
pb-4    → bottom only
pl-4    → left only

<!-- Same pattern for margin: m-4, mx-4, my-4, mt-4, etc. -->

<!-- Negative margin -->
-mt-4   → margin-top: -1rem

Convert between px and rem with our CSS Unit Converter or PX to REM tool.

Typography

<!-- Font size -->
text-xs     → 0.75rem (12px)
text-sm     → 0.875rem (14px)
text-base   → 1rem (16px)
text-lg     → 1.125rem (18px)
text-xl     → 1.25rem (20px)
text-2xl    → 1.5rem (24px)
text-3xl    → 1.875rem (30px)
text-4xl    → 2.25rem (36px)

<!-- Font weight -->
font-thin        → 100
font-light       → 300
font-normal      → 400
font-medium      → 500
font-semibold    → 600
font-bold        → 700
font-extrabold   → 800

<!-- Text alignment -->
text-left   text-center   text-right   text-justify

<!-- Text color -->
text-gray-500   text-red-600   text-blue-400   text-white

<!-- Line height -->
leading-none     → 1
leading-tight    → 1.25
leading-normal   → 1.5
leading-relaxed  → 1.625
leading-loose    → 2

Flexbox

<!-- Container -->
<div class="flex">              <!-- display: flex -->
<div class="flex flex-col">     <!-- flex-direction: column -->
<div class="flex flex-wrap">    <!-- flex-wrap: wrap -->

<!-- Justify (main axis) -->
justify-start    justify-center    justify-end
justify-between  justify-around    justify-evenly

<!-- Align (cross axis) -->
items-start   items-center   items-end   items-stretch

<!-- Gap -->
gap-4   gap-x-4   gap-y-4

<!-- Item properties -->
flex-1        → flex: 1 1 0%
flex-auto     → flex: 1 1 auto
flex-none     → flex: none
grow          → flex-grow: 1
shrink-0      → flex-shrink: 0

Experiment with Flexbox in our CSS Flexbox Playground.

Grid

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Column count -->
grid-cols-1 through grid-cols-12

<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

<!-- Span columns -->
col-span-2    col-span-3    col-span-full

<!-- Auto-fit responsive -->
grid-cols-[repeat(auto-fit,minmax(250px,1fr))]

Build grid layouts with our CSS Grid Generator.

Responsive Design

Tailwind uses mobile-first breakpoints:

Prefix	Min Width	CSS
(none)	0px	Default (mobile)
sm:	640px	@media (min-width: 640px)
md:	768px	@media (min-width: 768px)
lg:	1024px	@media (min-width: 1024px)
xl:	1280px	@media (min-width: 1280px)
2xl:	1536px	@media (min-width: 1536px)

<!-- Stack on mobile, side-by-side on desktop -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/3">Sidebar</div>
  <div class="w-full md:w-2/3">Content</div>
</div>

<!-- Hide on mobile, show on desktop -->
<div class="hidden md:block">Desktop only</div>
<div class="md:hidden">Mobile only</div>

Dark Mode

<!-- Enable dark mode in tailwind.config -->
<!-- darkMode: 'class' -->

<div class="bg-white dark:bg-gray-900">
  <h1 class="text-gray-900 dark:text-white">Hello</h1>
  <p class="text-gray-600 dark:text-gray-400">Content</p>
</div>

Common Patterns

Card

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Card Title</h3>
  <p class="text-gray-600 dark:text-gray-400 mt-2">Card content goes here.</p>
</div>

Button

<button class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded-lg transition-colors">
  Click me
</button>

Input

<input class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" />

Related Tools

• Tailwind CSS Converter — Convert CSS to Tailwind classes
• Tailwind Color Finder — Find Tailwind colors from HEX
• CSS Flexbox Playground — Experiment with Flexbox
• CSS Grid Generator — Build grid layouts
• Color Contrast Checker — Check accessibility
• CSS Unit Converter — Convert px to rem
• Color Palette Generator — Generate color palettes