Breakpoints
Tailwind CSS Breakpoints
Use responsive breakpoints triggers with TW elements. Set, how your layout responsive changes across device or viewport sizes.
Core concepts
- Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size.
- Use media queries to architect your CSS by breakpoint. Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use min-width in our media queries.
- Mobile first, responsive design is the goal. Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.
Available breakpoints
TW elements includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| Extra extra small | None | 0–320px |
| Extra small | xs |
≥320px |
| Small | sm |
≥576px |
| Medium | md |
≥768px |
| Large | lg |
≥1024px |
| Extra large | xl |
≥1280px |
| Extra extra large | 2xl |
≥1536px |
Each breakpoint size was chosen to be a multiple of 12 and to be representative of a subset of common device sizes and viewport dimensions. They don’t specifically target every use case or device, but the provide ranges provide a strong and consistent foundation to build on for nearly any device.