Tailwind CSS Cheat Sheet: Guida di riferimento completa

Tailwind CSS is a utility-first CSS framework that lets you build designs directly in your markup. Instead of writing custom CSS, you apply pre-built utility classes. This complete Tailwind CSS cheat sheet covers every major category of classes with their CSS output, so you can quickly look up any utility you need.

Why Tailwind CSS and Why a Cheat Sheet?

Tailwind CSS has hundreds of utility classes. While the naming convention is intuitive, having a quick-reference cheat sheet saves time and boosts productivity. This guide organizes all essential classes by category with exact CSS output.

Spacing: Padding & Margin

Tailwind uses a consistent spacing scale. The number after p- or m- maps to a rem value (multiply by 0.25rem). Negative margins use -m- prefix.

Directional Padding & Margin

<!-- Spacing examples -->
<div class="p-4">padding 1rem all sides</div>
<div class="px-6 py-3">horizontal 1.5rem, vertical 0.75rem</div>
<div class="mt-8 mb-4">top margin 2rem, bottom margin 1rem</div>
<div class="mx-auto max-w-lg">centered container</div>
<div class="-mt-4">negative top margin (overlap)</div>
<div class="space-x-4">children spaced 1rem horizontally</div>
<div class="space-y-2">children spaced 0.5rem vertically</div>

Typography

Tailwind provides utilities for font size, weight, line height, letter spacing, text alignment, and text color.

Font Size

Font Weight

Line Height

Letter Spacing

Text Alignment

Text Color

<!-- Text color examples -->
<p class="text-black">text-black → color: #000</p>
<p class="text-white">text-white → color: #fff</p>
<p class="text-gray-500">text-gray-500 → color: #6b7280</p>
<p class="text-red-600">text-red-600 → color: #dc2626</p>
<p class="text-blue-500">text-blue-500 → color: #3b82f6</p>
<p class="text-green-700">text-green-700 → color: #15803d</p>
<p class="text-transparent">text-transparent → color: transparent</p>
<p class="text-current">text-current → color: currentColor</p>

Colors

Tailwind uses a numeric color scale from 50 (lightest) to 950 (darkest). Colors are applied with prefixes: bg- for background, text- for text, and border- for borders.

Color Prefixes

<!-- Available color palettes -->
slate, gray, zinc, neutral, stone    <!-- Grays -->
red, orange, amber, yellow           <!-- Warm -->
lime, green, emerald, teal           <!-- Green -->
cyan, sky, blue, indigo              <!-- Blue -->
violet, purple, fuchsia, pink, rose  <!-- Purple/Pink -->

<!-- Gradient example -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
  Gradient background
</div>

Flexbox

Tailwind provides comprehensive flexbox utilities for building flexible layouts.

Justify & Align

Gap

<!-- Flexbox layout examples -->
<!-- Centered content -->
<div class="flex items-center justify-center h-screen">
  <div>Perfectly centered</div>
</div>

<!-- Navbar: logo left, links right -->
<nav class="flex justify-between items-center p-4">
  <div class="text-xl font-bold">Logo</div>
  <div class="flex gap-4">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

<!-- Responsive cards -->
<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[300px]">Card 1</div>
  <div class="flex-1 min-w-[300px]">Card 2</div>
  <div class="flex-1 min-w-[300px]">Card 3</div>
</div>

Grid

CSS Grid utilities for creating two-dimensional layouts.

Column & Row Span

<!-- Grid layout examples -->
<!-- 3-column grid -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>  <div>2</div>  <div>3</div>
  <div>4</div>  <div>5</div>  <div>6</div>
</div>

<!-- Responsive grid: 1 col mobile, 2 tablet, 3 desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- Dashboard layout with spanning -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-4">Header (full width)</div>
  <div class="col-span-1">Sidebar</div>
  <div class="col-span-3">Main content</div>
  <div class="col-span-2">Half width</div>
  <div class="col-span-2">Half width</div>
</div>

Layout: Width, Height & Container

Utilities for controlling element dimensions and layout containers.

Height & Max/Min

<!-- Layout examples -->
<div class="container mx-auto px-4">
  Centered responsive container
</div>

<div class="max-w-2xl mx-auto">
  Max-width 672px, centered
</div>

<div class="w-full h-screen">
  Full width, full viewport height
</div>

<div class="min-h-screen flex flex-col">
  <main class="flex-1">Content</main>
  <footer>Footer always at bottom</footer>
</div>

Borders & Rounded Corners

Utilities for border width, style, radius, and ring (outline) effects.

Border Radius

Ring (Outline)

Shadows & Effects

Utilities for box shadows, opacity, and blur effects.

Opacity & Blur

Transitions & Animation

Utilities for CSS transitions and keyframe animations.

Duration & Easing

Animations

<!-- Transition examples -->
<button class="bg-blue-500 hover:bg-blue-700 transition-colors duration-200">
  Smooth color change on hover
</button>

<div class="hover:scale-105 transition-transform duration-300 ease-out">
  Scale up on hover
</div>

<div class="hover:shadow-xl transition-shadow duration-300">
  Shadow appears on hover
</div>

<!-- Animation examples -->
<svg class="animate-spin h-5 w-5">...</svg>  <!-- Loading spinner -->
<span class="animate-ping absolute">...</span> <!-- Notification dot -->
<div class="animate-pulse bg-gray-300 h-4 rounded">...</div> <!-- Skeleton -->

Responsive Prefixes

Tailwind uses mobile-first responsive design. Prefix any utility with a breakpoint to apply it at that screen size and above.

<!-- Mobile-first responsive design -->

<!-- Stack on mobile, side-by-side on tablet+ -->
<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">Main</div>
</div>

<!-- Responsive text size -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
  Responsive Heading
</h1>

<!-- Responsive grid columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

<!-- Hide/show at breakpoints -->
<div class="hidden md:block">Visible on md and above</div>
<div class="block md:hidden">Visible only below md</div>

<!-- Responsive padding -->
<div class="p-4 sm:p-6 md:p-8 lg:p-12">
  Padding grows with screen size
</div>

State Variants

Apply styles conditionally using state variant prefixes.

<!-- State variant examples -->

<!-- Button with multiple states -->
<button class="bg-blue-500 hover:bg-blue-700 active:bg-blue-800
               focus:outline-none focus:ring-2 focus:ring-blue-300
               disabled:opacity-50 disabled:cursor-not-allowed
               transition-colors duration-200">
  Click me
</button>

<!-- Group hover: parent hover affects child -->
<div class="group p-4 hover:bg-blue-50 rounded-lg">
  <h3 class="group-hover:text-blue-600">Title</h3>
  <p class="group-hover:text-blue-400">Description</p>
</div>

<!-- Dark mode -->
<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Adapts to light/dark mode
</div>

<!-- Peer: input state affects sibling -->
<input class="peer" type="text" placeholder="Email" />
<p class="invisible peer-invalid:visible text-red-500">
  Invalid email address
</p>

Tips & Advanced Usage

Power-user features for when the built-in utilities are not enough.

Arbitrary Values

Use square brackets to specify any custom value:

<!-- Arbitrary values with square brackets -->
<div class="w-[120px]">width: 120px</div>
<div class="h-[calc(100vh-80px)]">height: calc(100vh - 80px)</div>
<div class="bg-[#1a2b3c]">background: #1a2b3c</div>
<div class="text-[22px]">font-size: 22px</div>
<div class="grid-cols-[200px_1fr_200px]">custom grid template</div>
<div class="p-[clamp(1rem,3vw,3rem)]">responsive clamp padding</div>
<div class="text-[color:var(--brand)]">CSS variable color</div>
<div class="top-[var(--header-h)]">CSS variable position</div>

Important Modifier

Prefix any utility with ! to add !important:

<!-- Important modifier with ! prefix -->
<div class="!p-4">padding: 1rem !important</div>
<div class="!mt-0">margin-top: 0 !important</div>
<div class="!text-red-500">color: #ef4444 !important</div>

<!-- Useful for overriding third-party styles -->
<div class="external-widget !bg-transparent !border-none">
  Override library styles
</div>

@apply Directive

Extract repeated utility patterns into custom CSS classes:

/* In your CSS file — use @apply to extract components */
.btn {
  @apply px-4 py-2 rounded-lg font-semibold transition-colors duration-200;
}

.btn-primary {
  @apply btn bg-blue-500 text-white hover:bg-blue-700;
}

.btn-secondary {
  @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
}

.input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md
         focus:outline-none focus:ring-2 focus:ring-blue-500
         focus:border-transparent;
}

.card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-md p-6
         hover:shadow-lg transition-shadow duration-300;
}

/* Note: Tailwind recommends using utilities directly in HTML
   and only extracting with @apply for truly repeated patterns. */

Frequently Asked Questions