Skip to content

Tailwind CSS Cheatsheet — Complete Quick Reference (2026)

DodaTech Updated 2026-06-20 3 min read

In this tutorial, you'll learn about Tailwind CSS Cheatsheet. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Tailwind CSS is a utility-first CSS framework that provides low-level classes for building custom designs without leaving your HTML — enabling rapid prototyping and consistent design systems.

Layout

Class CSS Equivalent
container max-width responsive per breakpoint
block, inline, inline-block display
hidden display: none
flex display: flex
grid display: grid
table, table-cell display variants
float-left, float-right, clearfix floats
object-contain, object-cover object-fit
overflow-hidden, overflow-scroll, overflow-auto overflow
relative, absolute, fixed, sticky position

Spacing

<!-- margin: m{margin}-{size}, e.g. m-4, mt-2, mx-auto -->
<div class="m-4 p-4">spacing</div>
<!-- size scale: 0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, ... -->
<!-- 1 unit = 0.25rem (4px by default) -->
<!-- mx-auto = margin-left/right: auto -->

Typography

<p class="text-sm text-gray-700 font-medium leading-relaxed tracking-wide">
  <!-- text-{size}: xs, sm, base, lg, xl, 2xl..9xl -->
  <!-- font-{weight}: thin, light, normal, medium, semibold, bold, extrabold -->
  <!-- leading-{spacing}: none, tight, snug, normal, relaxed, loose -->
  <!-- tracking-{spacing}: tighter, tight, normal, wide, wider, widest -->
</p>
<h1 class="text-3xl font-bold text-center uppercase">Title</h1>

Colors

<!-- text-{color}-{shade}: gray, red, orange, yellow, green, teal, blue, indigo, purple, pink, etc. -->
<!-- bg-{color}-{shade} for background -->
<!-- border-{color}-{shade} for borders -->
<!-- shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 -->
<div class="bg-blue-500 text-white hover:bg-blue-600">button</div>

Flexbox

<div class="flex flex-wrap justify-center items-center gap-4">
  <div class="flex-1">takes equal space</div>
  <div class="flex-shrink-0">doesn't shrink</div>
  <div class="order-1">reorder</div>
  <div class="self-end">align self</div>
</div>

Grid

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">span 2 columns</div>
  <div class="row-span-2">span 2 rows</div>
</div>
<!-- responsive: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"></div>

Responsive Design

<!-- breakpoints: sm(640), md(768), lg(1024), xl(1280), 2xl(1536) -->
<img class="w-full md:w-1/2 lg:w-1/3" src="..." />
<div class="hidden md:block">visible on md+</div>
<div class="block md:hidden">visible on mobile only</div>

Dark Mode

<!-- Enable via tailwind.config darkMode: 'class' or 'media' -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-gray-800 dark:text-white">Dark mode ready</h1>
</div>

Pseudo-classes & States

<button class="hover:bg-blue-600 focus:ring-2 active:scale-95 disabled:opacity-50">
  <!-- hover:, focus:, active:, disabled:, visited:, group-hover:, peer: -->
</button>
<!-- group hover -->
<div class="group hover:bg-gray-100">
  <p class="text-gray-500 group-hover:text-black">shows on hover</p>
</div>

Borders & Shadows

<div class="border border-gray-300 rounded-lg shadow-md">
  <!-- border-{side}: t, r, b, l; border-{width}: 0, 2, 4, 8 -->
  <!-- rounded: sm, md, lg, xl, 2xl, 3xl, full -->
  <!-- shadow: sm, md, lg, xl, 2xl, inner, none -->
</div>

Transition & Animation

<button class="transition-all duration-300 ease-in-out hover:scale-105">
  <!-- transition: none, all, colors, opacity, shadow, transform -->
  <!-- duration: 75, 100, 150, 200, 300, 500, 700, 1000 -->
  <!-- ease: linear, in, out, in-out -->
</button>
<!-- animation: animate-spin, animate-ping, animate-pulse, animate-bounce -->

Custom Config

// tailwind.config.js
module.exports = {
  content: ['./templates/**/*.html'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: { brand: { 500: '#3b82f6' } },
      spacing: { 72: '18rem' },
      fontFamily: { sans: ['Inter', ...] },
    },
  },
  plugins: [require('"@tailwindcss"/forms')],
}

Must-Know Items

  • Use @apply in CSS files to extract repeated utility patterns: .btn { @apply px-4 py-2 rounded-lg bg-blue-500 text-white }
  • Tailwind's JIT engine generates only the classes you use — zero unused CSS in production
  • prose class from @tailwindcss/typography plugin for rich text content
  • Use important: prefix for specificity overrides when needed
  • safelist: ['...'] in config prevents specific classes from being purged
  • Arbitrary values: w-[calc(100%-2rem)], bg-[#1da1f1], grid-cols-[200px_1fr]
  • container center by default needs mx-auto or container-center config
How does Tailwind's JIT engine work?

The Just-In-Time (JIT) engine scans your template files for class names and generates only the CSS you actually use — producing tiny production bundles (~10KB gzipped for most sites). It also enables arbitrary values like w-[200px] and all combinations of variants.

What is the `@apply` directive in Tailwind?

@apply lets you inline Tailwind utility classes into custom CSS with @apply. Use it to extract repeated component patterns (buttons, cards) into single CSS classes while keeping design tokens consistent. Example: .btn-primary { @apply px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 }

See full Tailwind CSS tutorials for building custom designs.

← Previous FastAPI Cheatsheet — Complete Quick Reference (2026) Next → Next.js Cheatsheet — Complete Quick Reference (2026)

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Cheatsheets