How do I customize the default breakpoints in Tailwind?
Asked on Oct 17, 2025
Answer
In Tailwind CSS, you can customize the default breakpoints by modifying the `theme.extend.screens` section in your `tailwind.config.js` file. This allows you to define custom screen sizes for responsive design.
<!-- BEGIN COPY / PASTE -->
module.exports = {
theme: {
extend: {
screens: {
'xs': '480px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
},
},
}
<!-- END COPY / PASTE -->Additional Comment:
- Tailwind's default breakpoints are mobile-first, meaning styles apply from the smallest to the largest screen size.
- You can add new breakpoints or modify existing ones by specifying them in the `screens` section.
- Ensure your custom breakpoints follow the same naming convention to maintain consistency across your project.
- After updating the configuration, rebuild your Tailwind CSS to apply the changes.
Recommended Links: