Responsive design and breakpoints

Mobile-first responsive styling

Tailwind uses responsive variants such as sm:, md:, lg:, xl: and 2xl:. An unprefixed utility applies by default, and a prefixed utility changes behavior at that breakpoint and above.

Think in progressive enhancement

Start with the smallest layout that works. Add columns, larger typography, wider spacing and navigation changes as the available space increases.

Range targeting

Tailwind also supports max-* variants and combinations such as md:max-xl:flex when a style should apply only to a range.