How can I customize the default breakpoints in Tailwind?

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

Post this Question & Answer:

How can I customize the default breakpoints in Tailwind?

Asked on Nov 27, 2025

Answer

In Tailwind CSS, you can customize the default breakpoints by modifying the theme section of your Tailwind configuration file. This allows you to define custom screen sizes that fit 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 screen upward.
Use the "extend" key to add new breakpoints or override existing ones without removing the defaults.
After customizing, ensure you rebuild your Tailwind CSS to see the changes.
Breakpoints are used in responsive utilities, like "md:bg-red-500" for medium screens and up.

✅ 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 27, 2025

Answer

Real Questions. Clear Answers.