Support for Arbitrary Values with Custom Breakpoint configuration

[hamidreza4dev]

What version of Tailwind CSS are you using?

v3.4.7

What build tool (or framework if it abstracts the build tool) are you using?

postcss 8.4.40, Next.js 14.2.5

What version of Node.js are you using?

For example: v20.15.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/DN6QPm53oY

Describe your issue

The class min-[800px]:bg-red-500 is not recognized because I switched to max-width breakpoints instead of the default min-width. Here is my configuration:

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    screens: {
      '3xl': { max: '1899px' },
      '2xl': { max: '1535px' },
      xl: { max: '1399px' },
      xxl: { max: '1279px' },
      lg: { max: '1023px' },
      md: { max: '767px' },
      sm: { max: '639px' },
      xs: { max: '479px' },
      xxs: { max: '399px' },
    },
  }
}

[wongjn]

Possible duplicate of #12489. Also, consider reading up on #9558 (comment) if you have not done so already. As a work-around, you could use arbitrary variants like [@media(min-width:800px)]:bg-red-500.

[adamwathan]

Hey! As mentioned by @wongjn this is by design at the moment and is explained in the original PR because of the amount of complexity involved in sorting the utilities to be in a useful order in the final CSS, so going to close this one.

I think we do need to rework the responsive design page to just not talk about configuring max-width breakpoints though honestly because of this and encourage the max-* variants instead.