How do I remove just the 2xl breakpoint in Tailwind 2?

Question

I have upgraded to tailwind 2 which has a new 2xl breakpoint. This causes any element with a container class to become wider than it used to.

How can I remove just the 2xl breakpoint while keeping all the other default breakpoints?

Answer 1

While the breakpoints documentation explins how to override existing breakpoints or add new ones, it does not explain how to remove a single breakpoint.

In your tailwind.config.js file enter the following.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: Object.fromEntries(
      Object.entries(defaultTheme.screens).filter(([key, value]) => key !== '2xl')
    )
  }
}

This works by importing the defaultTheme, converting its screens object to key/value "entries", filtering those entires by key to exclude 2xl, then recombining the result of the filter back into an object using fromEntires().

Optionally, if you only want to keep certain breakpoints, you can invert the filter.

    screens: Object.fromEntries(
      Object.entries(defaultTheme.screens).filter(([key, value]) => ['sm', 'xl'].includes(key))
    )

The above would only keep the sm and xl breakpoints.