Tailwind CSS Breakpoints
Use responsive breakpoints triggers with TW elements. Set, how your layout responsive changes across device or viewport sizes.
- 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.
TW elements includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.
|Extra extra small||None||0–320px|
|Extra extra large||
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.