Automatically add corresponding max-width breakpoints for each existing breakpoint in Tailwind CSS

tailwind-maxwidth-breakpoints.js

const defaultTheme = require('tailwindcss/defaultTheme')

const screens = { ...defaultTheme.screens }

// add max-width screens/breakpoints prefixed with `-`
for (let screen in screens) {
  const size = screens[screen]
  if (typeof size === 'string') {
    screens[`-${screen}`] = { max: `calc(${size} - 1px)` }
  }
}

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