Custom Breakpoints in Tailwind Config
Define custom responsive breakpoints (screens) in tailwind.config.js with min-width, max-width, and range-based queries for precise responsive design.
Breakpoints
Detailed Explanation
Custom Breakpoints
Tailwind's responsive system is powered by the screens configuration. The defaults are:
| Name | Width |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
Adding Breakpoints
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
"xs": "475px",
"3xl": "1920px",
"4k": "2560px",
},
},
},
};
Now you can use xs:grid-cols-2, 3xl:max-w-screen-3xl, etc.
Max-width Breakpoints
By default Tailwind uses min-width (mobile-first). For max-width:
screens: {
"to-sm": { max: "639px" },
"to-md": { max: "767px" },
}
Usage: to-md:hidden hides an element below 768px.
Range Breakpoints
screens: {
"md-only": { min: "768px", max: "1023px" },
"tablet": { min: "768px", max: "1279px" },
}
Overriding All Breakpoints
If your design system uses completely different breakpoints:
theme: {
screens: {
"mobile": "320px",
"tablet": "768px",
"laptop": "1024px",
"desktop": "1440px",
"wide": "1920px",
},
}
Note: overriding (not extending) removes the default sm/md/lg/xl/2xl names entirely.
Use Case
Use custom breakpoints when your design mockups target specific device widths that differ from Tailwind's defaults, such as 475px for small phones or 1920px for wide screens.