Breakpoints

Responsive breakpoints for building adaptive layouts across mobile, tablet, and desktop devices.

Breakpoint Reference

All Breakpoints
Standard Tailwind CSS breakpoints for responsive design
BreakpointMin WidthMax WidthTailwind ClassUsage
Mobile
0px639pxdefault (< sm)Mobile devices, small screens
Tablet (sm)
640px767pxsm:Small tablets, large phones
Tablet (md)
768px1023pxmd:Tablets, small laptops
Desktop (lg)
1024px1279pxlg:Laptops, desktops
Desktop (xl)
1280px1535pxxl:Large desktops
Desktop (2xl)
1536px∞2xl:Extra large screens

Breakpoints by Device

Mobile Breakpoints
Optimized for phones and small screens

Mobile

default (< sm)

Mobile devices, small screens

Min: 0pxMax: 639px

Interactive Breakpoint Visualizer

Drag to Resize & Visualize Breakpoints
Drag the right edge to see how layouts adapt at different screen sizes
Current Breakpoint:Desktop
Width:1024px
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Mobile
SM
MD
Desktop
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  {/* 1 col mobile, 2 cols tablet-sm, 3 cols tablet-md, 4 cols desktop */}
</div>
Responsive Typography
Drag to see how text sizes scale at different breakpoints
Current Breakpoint:Desktop
Width:1024px

Responsive Heading

This paragraph also scales with screen size for optimal readability.

<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
  Responsive Heading
</h1>
<p className="text-sm sm:text-base md:text-lg lg:text-xl">
  Responsive paragraph text
</p>
Responsive Spacing
Drag to see how padding increases on larger screens
Current Breakpoint:Desktop
Width:1024px

This box has responsive padding: p-4 on mobile, p-6 on small tablets, p-8 on medium tablets, and p-12 on desktop.

<div className="p-4 sm:p-6 md:p-8 lg:p-12">
  {/* Padding: 16px → 24px → 32px → 48px */}
</div>
Responsive Visibility
Drag to see elements show or hide based on screen size
Current Breakpoint:Desktop
Width:1024px
Visible only on mobile (< 640px)
<div className="block sm:hidden">Mobile only</div>
<div className="hidden sm:block md:hidden">Small tablet only</div>
<div className="hidden md:block lg:hidden">Medium tablet only</div>
<div className="hidden lg:block">Desktop only</div>
Breakpoint Guidelines

Mobile-First Approach: Start with mobile styles and use breakpoint prefixes (sm:, md:, lg:, etc.) to add styles for larger screens.

Breakpoint Prefixes: Use Tailwind's breakpoint prefixes before any utility class. For example, md:text-lg applies large text only on medium screens and above.

Grid Layouts: Use responsive grid classes like grid-cols-1 md:grid-cols-2 lg:grid-cols-3 to create adaptive layouts.

Visibility: Control element visibility with hidden and block combined with breakpoints.

Testing: Always test your responsive designs across different screen sizes using browser dev tools or real devices.

Performance: Avoid excessive breakpoint variations. Focus on key breakpoints (mobile, tablet, desktop) for most use cases.