How can I create a custom breakpoint in Tailwind?

Question

Q&A Network · Accepted Answer

To create a custom breakpoint in Tailwind CSS, you need to extend the default theme configuration within your Tailwind configuration file. This allows you to define additional screen sizes that Tailwind will recognize and generate utility classes for.


    
    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          screens: {
            'xs': '480px',  // Custom breakpoint at 480px
          },
        },
      },
    }

ADDITIONAL COMMENT:

Custom breakpoints are added under the "screens" key in the "extend" section to avoid overwriting existing defaults.
Once added, you can use the new breakpoint like any other, e.g., "xs:bg-blue-500".
Remember to rebuild your CSS after modifying the configuration file to see the changes.

✅ Answered with Tailwind CSS best practices.

How can I create a custom breakpoint in Tailwind?

Asked on Oct 16, 2025

Answer

The Q&A Network