Adding custom raw breakpoints removes built-in max-*: breakpoints

[nikitaourazbaev]

What version of Tailwind CSS are you using?

For example: v3.2.4

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

Tailwind CLI

What version of Node.js are you using?

For example: v16.13.1

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

https://github.com/nikitaourazbaev/tw-breakpoints-reduced-case

Describe your issue

Adding raw breakpoints through theme.extend.screens seems to remove the built-in max-* breakpoints, e.g. max-md, max-lg, etc.

In the example repo I’m adding two breakpoints:

// ...
theme: {
    extend: {
      screens: {
        'supports-hover': { raw: '(hover: hover)' },
        'no-hover-support': { raw: '(hover: none)' },
    },
  },
},
// ...

To reproduce the issue, build the example project with these new breakpoints. There will be no max-md: breakpoint in the built CSS file. Comment the new breakpoints out and the max-md: breakpoint will be included.

[adamwathan]

Hey! Yep this is currently by design as outlined in the pull request (see the "Restrictions" section):

#9558

A better solution for what you're trying to do would be to add a couple of custom variants:

module.exports = {
  // ...
  plugins: [
    function ({ addVariant }) {
      addVariant('supports-hover', '@media (hover: hover)')
      addVariant('no-hover-support', '@media (hover: none)')
    }
  ]
}