Add extend screen disable min-[*px] class

[tokmo]

What version of Tailwind CSS are you using?
v3.4.13

What build tool (or framework if it abstracts the build tool) are you using?
Next.js v14.2.11, postcss v8.4.47

What version of Node.js are you using?
v20.17

What browser are you using?
Chrome

What operating system are you using?
MacOS

Describe your issue
When I add extended screens inside the Tailwind config, it disables the min-[*px] class in the HTML.

[wongjn]

This is a known limitation, see #9558 (comment) for details.

[philipp-spiess]

Yep! Consider migrating the screens config to use a min-based config like this:

module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
    },
  },
};

That should generate the min-* and max-* utilities (and it will continue to do so with Tailwind CSS v4 🙂)