Breakpoints Reference

Quick reference for responsive breakpoints in popular CSS frameworks

xs• 0px

Configuration

Your Current Viewport

0 × 0

Currently at xs breakpoint

Framework

Breakpoint Visualization

2xl

0px

0px1800px

Export As

Breakpoints5 breakpoints

Tailwind CSS Breakpoints

@media (min-width: 640px)

@media (min-width: 768px)

@media (min-width: 1024px)

@media (min-width: 1280px)

2xl

@media (min-width: 1536px)

Mobile First: Start with base styles, add media queries for larger screens.

Desktop First: Use max-width media queries instead of min-width.

Common Pattern: sm = tablet, md = small laptop, lg = desktop.

About Viewport & Breakpoint Reference

Quick reference for responsive breakpoints in popular CSS frameworks. Shows your current viewport and generates media queries.