Tailwind CSS Breakpoints

Breakpoints in Tailwind CSS allow you to apply different utility classes at specific screen widths, enabling fully responsive designs with minimal effort.

1. Default Breakpoints

Tailwind uses the following default screen sizes for responsive utilities:

Prefix	Min Width
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

2. Applying Responsive Prefixes

You can add responsive variants by prefixing any utility with a breakpoint name:


<div class="text-sm md:text-base lg:text-xl">
    Responsive Text
</div>

This will apply:

text-sm on small screens
text-base from 768px and up
text-xl from 1024px and up

3. Customizing Breakpoints

You can override or add breakpoints in your tailwind.config.js:


module.exports = {
  theme: {
    extend: {},
    screens: {
      'xs': '480px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
}

4. Best Practices

Start with mobile defaults and scale up.
Use as few breakpoints as necessary to keep your CSS clean.
Test designs at all screen sizes regularly.

Conclusion

Tailwind's breakpoint system makes responsive design intuitive and scalable. With just a few prefixes, you can craft fully adaptive UIs without ever writing a single media query.

← Previous: Mobile-First Philosophy Next: Hiding/Showing Elements Responsively →