Ask any question about Tailwind CSS here... and get an instant response.

How can I customize the default breakpoints in Tailwind?

Asked on Nov 30, 2025

Answer

To customize the default breakpoints in Tailwind CSS, you need to modify the `tailwind.config.js` file. This file allows you to define custom screen sizes to suit your project's needs.

<!-- 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:

The `extend` key allows you to add new breakpoints or override existing ones without removing Tailwind's defaults.
Breakpoints are defined using a key-value pair where the key is the name and the value is the minimum width.
After updating the configuration, ensure you rebuild your CSS to apply the changes.

✅ Answered with Tailwind CSS best practices.

Ask any question about Tailwind CSS here... and get an instant response.

How can I customize the default breakpoints in Tailwind?

Asked on Nov 30, 2025

Answer

The Q&A Network