How to Customize Breakpoints in TailwindCSS

By default Tailwind CSS provides breakpoints that cover the most common screen sizes. However, you might need additional breakpoints or overwrite the default breakpoints to suit your needs.

In this tutorial, we will demonstrate how to customize breakpoints in TailwindCSS.

Add additional breakpoints

To add additional breakpoints to your Tailwind CSS project, open the Tailwind configuration file tailwind.config.js:

module.exports = {
  theme: {
    extended: {
      screens: {
        '4xl': "2800px",
      },
    }
  }
}

Note we are completing the task in the extended section of theme property.

Overwrite the default breakpoints

To overwrite the default breakpoints in your Tailwind CSS project, open the Tailwind configuration file tailwind.config.js:

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    screens: {
      ...defaultTheme.screens,
      '2xl': "1600px",
    },
  }
}

Note we are completing the task in the screens section of theme property. Since we are basically modifying the original values, we need to supply the default screen size again. That's why we have imported the default theme at the beginning of the file and provided it to the screens.