Tailwind CSS Cheatsheet

Responsive Design

Use this Tailwind CSS reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

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>