[Bug] Adding a custom directive to `theme.extend.screens` breaks other breakpoints.

[hirasso]

What version of Tailwind CSS are you using?

v3.4.4

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

• webpack 5.92.0
• postcss-loader 8.1.1
• postcss-preset-env 9.5.14

What version of Node.js are you using?

For example: v20.11.0

What browser are you using?

Arc

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/csci1nIOS9?file=config

Describe your issue

The reproduction URL basically shows my issue. As soon as I add a custom directive hoversupport to my theme.screens.extend in tailwind.config.js, my breakpoints stop working. Is this intended behavior or a bug? It feels like a bug to me.

[hirasso]

...turns out that this seems to be the way to add custom modifiers (instead of in the theme.extend.screens object):

{
  plugins: [
    plugin(function ({ addVariant }) {
      /** allow to only apply a style on devices that support hover **/
      addVariant('hoversupport', '@media (hover: hover) and (pointer: fine)')
    }),
  ]
}

I'd still be interested to learn why this disabled all my other breakpoints:

{
  theme: {
    extend: {
      screens: {
        xs: "360px",
        hoversupport: { raw: "(hover: hover) and (pointer: fine)" },
      },
    },
  },
}

[wongjn]

Seems to be working fine in the Tailwind Play your provided:

[hirasso]

No, the first box should be blue at this screen size.

[wongjn]

Ah, in that case, you'd want to adjust the classes a bit:

-<p class="rounded-md bg-green-300 p-2 md:bg-blue-300">This box should be …
+<p class="rounded-md p-2 bg-blue-300">This box should be green on screens…

[hirasso]

but it shouldn't be blue at all screen sizes. Only if at or above md. I have probably confused you with my demo more than I've helped I'm afraid 😅

...anyways, it's working fine (as expected) if I use the plugin approach with addVariant as described above, so this all isn't a huge issue after all.

[wongjn]

As per #13898 (comment), the viewport is 500px width, which is narrower than the md breakpoint of 768px. Thus, the box is green, and when the viewport is wider than 768px, it is blue. This seems to act as you desire, unless I'm missing something?

[hirasso]

Oh my god, you are right! I got confused building the demo. But check this out: It stops working if I use an arbitrary value for the first box, like min-[300px]:bg-blue-300

https://play.tailwindcss.com/b1IyFxPSQk

...then, if you comment out the custom directive in the config, you can see how either the one or the other works as expected.

[wongjn]

That's a known limitation, see #9558 (comment) and #12489 (comment) for details.

[hirasso]

Thank you @wongjn for your help! The links to the comments are great. Thanks again!