TailwindCSS is becoming a favorite amongst developers and I am using it extensively in my applications. Seeing that there is a new version out, I wanted to upgrade this website and quickly realized that the width of the page is suddenly off.

This is because TailwindCSS 2.0 introduces a new, additional breakpoint for containers, the 2xl breakpoint:

None          width: 100%;
sm (640px)    max-width: 640px;
md (768px)    max-width: 768px;
lg (1024px)   max-width: 1024px;
xl (1280px)   max-width: 1280px;
2xl (1536px)  max-width: 1536px; <-- NEW

While this breakpoint certainly comes in handy for pages which need the additional screen real-estate, it's unlikely that we want to change the dimensions of our existing pages.

Luckily there is a way to easily configure tailwind to use the old container dimensions.

Setting the old breakpoints

To use TailwindCSS 2.0, but still the old breakpoints, we need to adapt our tailwind.config.js file:

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

This sets the screen widths explicitly back to those of pre 2.0 versions and after restarting the application our container width will now appear unchanged to the old version of tailwind.