DevToolbox

Tailwind CSS Breakpoints: Default Values and Device Mapping

Complete reference for Tailwind CSS responsive breakpoints. Maps each breakpoint (sm, md, lg, xl, 2xl) to real device viewports with usage examples.

Framework Breakpoints

Detailed Explanation

Tailwind CSS Breakpoints Reference

Tailwind CSS uses a mobile-first breakpoint system with five default breakpoints. Each breakpoint defines a min-width media query threshold.

Default Breakpoints

Prefix Min Width CSS Media Query
sm 640px @media (min-width: 640px)
md 768px @media (min-width: 768px)
lg 1024px @media (min-width: 1024px)
xl 1280px @media (min-width: 1280px)
2xl 1536px @media (min-width: 1536px)

Device Mapping

  • Below sm (< 640px): All smartphones in portrait — iPhone SE through iPhone 16 Pro Max, all Samsung Galaxy S models, all Pixel phones
  • sm (640-767px): Large phones in landscape, some small tablets
  • md (768-1023px): iPad portrait, Galaxy Tab portrait, Surface Go
  • lg (1024-1279px): iPad Pro landscape, Chromebooks, small laptops
  • xl (1280-1535px): MacBook Air, standard laptops, Surface Laptop
  • 2xl (1536px+): MacBook Pro 16", desktop monitors, 4K displays

Usage Example

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  <!-- Cards -->
</div>

This creates a responsive grid: 1 column on phones, 2 on tablets, 3 on laptops, and 4 on desktops.

Customizing Breakpoints

You can customize breakpoints in tailwind.config.js:

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
}

Max-Width Variants

Tailwind also supports max-width breakpoints using the max-* prefix:

<div class="max-md:hidden">
  <!-- Hidden below 768px -->
</div>

Use Case

A developer building a Tailwind CSS project needs to understand which real devices correspond to each breakpoint prefix to make informed layout decisions in their utility classes.

Try It — Viewport Size Reference

Open full tool →

Related Topics

Bootstrap 5 Breakpoints: Grid System and Device Coverage

Framework Breakpoints

Material UI (MUI) Breakpoints: Values and Device Coverage

Framework Breakpoints

Mobile-First Breakpoint Strategy for Responsive Design

Mobile Viewports

Responsive Design Testing: Essential Viewport Sizes to Test

Responsive Design

CSS Media Query Viewport Ranges and Device Targeting

Responsive Design