Tailwind CSS Responsive Breakpoints Reference

Tailwind CSS Breakpoints

Tailwind CSS uses a mobile-first breakpoint system. Styles without a prefix apply to all screen sizes, and breakpoint prefixes apply at that width and above.

Default Breakpoints

Prefix	Min Width	Typical Devices
(none)	0px	All (mobile-first base)
sm	640px	Large phones in landscape
md	768px	Tablets
lg	1024px	Small laptops, tablets landscape
xl	1280px	Laptops, desktops
2xl	1536px	Large desktops

Usage Pattern

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  <!-- Responsive grid: 1 col mobile, 2 cols sm, 3 cols lg, 4 cols xl -->
</div>

How It Works Under the Hood

Each breakpoint compiles to a CSS media query:

/* sm: */
@media (min-width: 640px) { ... }
/* md: */
@media (min-width: 768px) { ... }
/* lg: */
@media (min-width: 1024px) { ... }
/* xl: */
@media (min-width: 1280px) { ... }
/* 2xl: */
@media (min-width: 1536px) { ... }

Customizing Breakpoints

In tailwind.config.js:

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  },
}

Max-Width Breakpoints

Tailwind v3.2+ supports max-width variants:

<div class="max-lg:hidden">
  <!-- Hidden below 1024px -->
</div>

Testing Breakpoints

Open your browser DevTools and resize the viewport, or use this Screen Info Display tool to see which breakpoint is currently active in real time.