Tailwind CSS Cheatsheet

Responsive Design

Use this Tailwind CSS reference while you build software engineering projects, review code, or refresh the syntax you reach for most.

How Responsive Prefixes Work

Tailwind uses a mobile-first approach. An unprefixed class applies to all screen sizes. A breakpoint prefix applies the class at that breakpoint and above.

<!-- text-sm on all screens, text-base on md+ screens -->
<p class="text-sm md:text-base">Responsive text</p>

<!-- Stack on mobile, row on lg -->
<div class="flex flex-col lg:flex-row gap-4">...</div>

There is no xs: or default breakpoint for "small only." Target small screens with unprefixed classes and override at larger breakpoints.

Default Breakpoints

Prefix	Min-width	Typical device
(none)	0px	All screens (mobile-first default)
`sm:`	640px	Large phones, small tablets
`md:`	768px	Tablets
`lg:`	1024px	Laptops
`xl:`	1280px	Desktops
`2xl:`	1536px	Wide monitors

Applying Any Utility Responsively

Any Tailwind utility can be prefixed:

<!-- Layout -->
<div class="block md:flex xl:grid xl:grid-cols-3">...</div>

<!-- Spacing -->
<section class="px-4 md:px-8 xl:px-16 py-8 md:py-16">...</section>

<!-- Typography -->
<h1 class="text-3xl md:text-5xl xl:text-7xl font-bold leading-tight">...</h1>

<!-- Visibility -->
<nav class="hidden md:flex gap-6">Desktop nav</nav>
<button class="md:hidden">Hamburger menu</button>

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

Max-Width Breakpoints (v3.2+ / v4)

Use the max-*: prefix to apply a class only below a breakpoint (inverse of the default):

Prefix	Max-width
`max-sm:`	below 640px
`max-md:`	below 768px
`max-lg:`	below 1024px
`max-xl:`	below 1280px
`max-2xl:`	below 1536px

<!-- Hidden only on mobile -->
<aside class="max-md:hidden">Sidebar</aside>

<!-- Padding only on small screens -->
<div class="max-sm:px-4">...</div>

Range Breakpoints

Target a range between two breakpoints using both min and max prefixes together:

<!-- Only applies on md through lg (768px–1023px) -->
<div class="md:max-lg:hidden">Hidden on tablets only</div>

<!-- Only applies on sm through xl -->
<p class="sm:max-xl:text-center">Centered on medium screens only</p>

Custom Breakpoints (v4)

Add arbitrary breakpoints in your CSS:

@import "tailwindcss";

@theme {
  --breakpoint-xs: 480px;
  --breakpoint-3xl: 1800px;
}

<div class="xs:flex 3xl:grid-cols-6">...</div>

v3 Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'xs': '480px',
        '3xl': '1800px',
      }
    }
  }
}

Arbitrary Breakpoints

One-off breakpoints using bracket syntax:

<div class="min-[820px]:grid-cols-3">...</div>
<div class="max-[600px]:text-sm">...</div>

Container Queries (v3.3+ with plugin / v4 built-in)

Style elements based on their parent container's size, not the viewport.

v4 (built-in)

<!-- Mark a container -->
<div class="@container">
  <!-- Style children based on container size -->
  <div class="@sm:flex @lg:grid-cols-3">
    ...
  </div>
</div>

<!-- Named containers for nested scenarios: size first, name after the slash -->
<div class="@container/sidebar">
  <div class="@sm/sidebar:hidden">...</div>
</div>

Container Query Sizes (v4)

Prefix	Min container width
`@xs:`	20rem (320px)
`@sm:`	24rem (384px)
`@md:`	28rem (448px)
`@lg:`	32rem (512px)
`@xl:`	36rem (576px)
`@2xl:`	42rem (672px)
`@3xl:`	48rem (768px)
`@4xl:`	56rem (896px)
`@5xl:`	64rem (1024px)
`@6xl:`	72rem (1152px)
`@7xl:`	80rem (1280px)
`@[400px]:`	arbitrary min-width
`@max-sm:`	max container width

v3 (requires plugin)

npm install @tailwindcss/container-queries

// tailwind.config.js
module.exports = {
  plugins: [require('@tailwindcss/container-queries')],
}

Responsive Design Patterns

Show/hide at breakpoints

<!-- Mobile-only element -->
<div class="md:hidden">Mobile menu</div>

<!-- Desktop-only element -->
<div class="hidden md:block">Desktop sidebar</div>

<!-- Tablet-only element -->
<div class="hidden md:block lg:hidden">Tablet-only message</div>

Responsive grid

<!-- 1 col → 2 col → 3 col → 4 col -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <div class="rounded-xl border p-4">Card</div>
  ...
</div>

Responsive stack → side-by-side

<div class="flex flex-col md:flex-row gap-6">
  <aside class="md:w-64 shrink-0">Sidebar</aside>
  <main class="grow min-w-0">Content</main>
</div>

Responsive typography scale

<h1 class="text-2xl sm:text-4xl lg:text-6xl font-bold tracking-tight">
  Big Heading
</h1>
<p class="text-base sm:text-lg lg:text-xl text-slate-600 mt-4">
  Subheading that scales
</p>

Responsive hero section

<section class="px-4 py-16 md:px-8 md:py-24 lg:py-32 max-w-7xl mx-auto">
  <div class="flex flex-col lg:flex-row items-center gap-12">
    <div class="lg:w-1/2">
      <h1 class="text-4xl lg:text-6xl font-bold">Headline</h1>
      <p class="mt-4 text-lg text-slate-600">Description</p>
    </div>
    <div class="lg:w-1/2">
      <img class="w-full rounded-2xl shadow-xl" src="hero.jpg" alt="">
    </div>
  </div>
</section>

Print Variant

Apply styles only when printing:

<div class="print:hidden">Hidden in print</div>
<div class="hidden print:block">Only visible in print</div>
<p class="text-slate-600 print:text-black">Darker in print</p>

Orientation Variant

<div class="landscape:hidden">Hidden in landscape</div>
<div class="portrait:flex">Only flex in portrait</div>

Motion Variants

<!-- Skip animations for users who prefer reduced motion -->
<div class="animate-spin motion-reduce:animate-none">...</div>
<div class="transition-all motion-reduce:transition-none">...</div>

<!-- Extra animation only if motion is okay -->
<div class="motion-safe:hover:scale-105 transition-transform">...</div>