Generate min-width, max-width, and "only" Tailwind screen variants automagically

generate-tailwind-screens.js

function generateScreens(screenSizes) {
  const getPx = val => `${val}px`
  const screenEntries = Object.entries(screenSizes)

  const minWidthBreakpoints = screenEntries.reduce(
    (acc, [name, width]) => ({
      ...acc,
      [name]: { min: getPx(width) },
    }),
    {},
  )
  const maxWidthBreakpoints = screenEntries.reduce(
    (acc, [name, width]) => ({
      ...acc,
      [`to-${name}`]: { max: getPx(width) },
    }),
    {},
  )

  let prevBreakpointWidth = null
  const onlyBreakpoints = screenEntries.reduce((acc, [name, width]) => {
    const isFirst = prevBreakpointWidth === null

    const key = name + '-only'
    const value = isFirst
      ? { max: getPx(width) }
      : { min: getPx(width), max: getPx(prevBreakpointWidth - 1) }

    prevBreakpointWidth = width

    return { ...acc, [key]: value }
  }, {})

  return { ...minWidthBreakpoints, ...maxWidthBreakpoints, ...onlyBreakpoints }
}

export { generateScreens }

tailwind.config.js

import { generateScreens } from './generate-tailwind-screens'

module.exports = {
  theme: {
    screens: {
      ...generateScreens({ sm: 640, md: 768, lg: 1024, xl: 1280 }),
    },
  },
}