Tailwind Breakpoints
Resize your window and watch the active breakpoint change, or type any width to see which prefix applies. The reference table lists the default values and their media queries.
Resize the window and this updates live.
A prefix like md: applies from that width upwards.
| Prefix | Minimum width | CSS |
|---|---|---|
| (none) | 0px | applies at every width |
| sm: | 640px (40rem) | @media (min-width: 40rem) |
| md: | 768px (48rem) | @media (min-width: 48rem) |
| lg: | 1024px (64rem) | @media (min-width: 64rem) |
| xl: | 1280px (80rem) | @media (min-width: 80rem) |
| 2xl: | 1536px (96rem) | @media (min-width: 96rem) |
@theme {
--breakpoint-3xl: 120rem;
}
/* usage: class="3xl:grid-cols-6" */Frequently asked questions
What are the default Tailwind CSS breakpoints?
sm 640px (40rem), md 768px (48rem), lg 1024px (64rem), xl 1280px (80rem) and 2xl 1536px (96rem). Anything below 640px is the base style with no prefix.
Is Tailwind mobile first?
Yes. Unprefixed classes apply at all widths, and a prefix like md: applies from that width upwards. Write the mobile layout first, then add larger-screen overrides.
How do I target only small screens?
Use the max-* variants such as max-md:hidden, which applies below the md breakpoint. You can also combine ranges, for example md:max-xl:grid-cols-2.
How do I add a custom breakpoint?
In Tailwind v4, add a --breakpoint-name variable to your @theme block, for example --breakpoint-3xl: 120rem. You can then use 3xl: as a prefix. In v3, extend theme.screens.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.