Allow @supports to work custom screens

[nghiepdev]

Currently, we can use raw to custom advance media queries, But still no support @supports key:

module.exports = {
  theme: {
    extend: {
      screens: {
        touch: {raw: '(hover: none) and (pointer: coarse)'},
        standalone: {raw: '(display-mode: standalone)'},
      },
    },
  },
}

Request features look like this:

module.exports = {
  theme: {
    extend: {
      screens: {
        ios: {
          supports: '(-webkit-touch-callout: none)',
        },
      },
    },
  },
}

---

UPDATED: 4 ways to resolve

<div class="[@supports(-webkit-touch-callout:none)]:text-red-500">1</div>

<div class="supports-[-webkit-touch-callout:none]:text-red-500">2</div>

plugins: [
  plugin(function({ addVariant }) {
    addVariant("ios", "@supports(-webkit-touch-callout:none)")
  })
]
<div class="ios:text-red-500" />

theme: {
  supports: {
    ios: '-webkit-touch-callout: none'
  }
}

[wongjn]

You could look at trying out the insiders build (#9504) which has a new variant for @supports rules. Otherwise until v3.2, you could use an arbitrary variant like [@supports(-webkit-touch-callout:none)]:text-black.

[nghiepdev]

Wow. Thanks @wongjn