Responsive Breakpoints

Mobile-First Responsive Design

Tailwind is mobile-first. Every utility applies at all screen sizes by default. To apply a utility only at larger sizes, prefix it with a breakpoint.

Default Breakpoints

• sm — 640 px and above.
• md — 768 px and above.
• lg — 1024 px and above.
• xl — 1280 px and above.
• 2xl — 1536 px and above.

A class like md:grid-cols-3 means: use 3 columns on medium screens and wider; fall back to whatever the smaller screen defines (usually 1 column).

<div class="text-base md:text-lg lg:text-xl">
  <p class="block md:hidden">Mobile view</p>
  <p class="hidden md:block">Desktop view</p>
</div>

Custom Breakpoints

@theme {
  --breakpoint-tablet: 900px;
  --breakpoint-widescreen: 1600px;
}

After this, tablet:flex and widescreen:grid-cols-5 are valid utility classes.