Disable 2xl breakpoint for container class

user_492447 0
Viewed 3345

Tailwind 2.0.1 has a 2xl breakpoint set to 1536px. I would like to disable this breakpoint and set the max container width to the xl breakpoint. According to the docs, I can disable all responsive variants for the container, but I just want to disable this single breakpoint. Instead I have tried to disable the 2xl breakpoint by updating the Tailwind configuration as follows:

module.exports = {
  theme: {
    screens: {
      '2xl': '1280px'
    }
  }
}

This does not work, nor do I think this would be correct when I only want to target a single class and a single breakpoint.

nuxt.js tailwind-css
1 Answers

If it's just removing this breakpoint for the container class you want to specify the breakpoints you want to keep in the theme.container.screens key.

module.exports = {
    theme: {
        container: {
            screens: {
                'sm': '640px',
                'md': '768px',
                'lg': '1024px',
                'xl': '1280px',
            }
        }
    }
}

Or if you're using the same breakpoints as the main theme and you'd prefer not to specify the same breakpoints again, you can get them using the default theme.

const defaultTheme = require('tailwindcss/defaultTheme')

let containerScreens = Object.assign({}, defaultTheme.screens)

// Delete the 2xl breakpoint from the object
delete containerScreens['2xl']

module.exports = {
    theme: {
        container: {
            screens: containerScreens
        }
    }
},

Here it is in the Tailwind Play app as a working example: https://play.tailwindcss.com/0ErQ9yGQvs?size=2142x720&file=config

user_11584690
Related