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

How can I customize breakpoints in Tailwind?

Asked on Dec 04, 2025

Answer

In Tailwind CSS, customizing breakpoints is done through the Tailwind configuration file, `tailwind.config.js`. This allows you to define your own responsive breakpoints to suit your project's needs.

<!-- BEGIN COPY / PASTE -->
    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          screens: {
            'xs': '475px',
            'sm': '640px',
            'md': '768px',
            'lg': '1024px',
            'xl': '1280px',
            '2xl': '1536px',
          },
        },
      },
    }
    <!-- END COPY / PASTE -->

Additional Comment:

Tailwind's default breakpoints are mobile-first, meaning they apply styles from the smallest to the largest screen size.
You can add new breakpoints or override existing ones by modifying the `screens` key in the configuration file.
After updating the configuration, ensure you rebuild your CSS so the changes take effect.
Custom breakpoints can be used just like the default ones, such as `xs:bg-red-500` for a background color change at the `xs` breakpoint.

✅ Answered with Tailwind CSS best practices.

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

How can I customize breakpoints in Tailwind?

Asked on Dec 04, 2025

Answer

The Q&A Network