Variant for display-mode: standalone

[mrleblanc101]

Would be nice to be included in core for people developing PWA using Tailwindcss.
I guess it can be done with @custom-variant, but not sure how.

[mrleblanc101]

Authorized value for display-mode: fullscreen | standalone | minimal-ui | browser | picture-in-picture

[wongjn]

With a custom variant, you'd do:

@custom-variant foo (@media (display-mode: standalone));

Where foo is the name of the variant.

[mrleblanc101]

Thank you, the exemple custom variant exemple confused me because it's not a media query:

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

Do you think this should be in core ?
I think so

[mrleblanc101]

Proposed
display-fullscreen:
display-standalone:
display-minimal-ui: or display-minimal:
display-browser:
display-picture-in-picture: or display-pip:

[mrleblanc101]

The current list of variants: https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

[mrleblanc101]

@wongjn Would this be added to core if I take the time to create a Pull Request for this ?
Basically, this plugin https://github.com/bhendi-boi/tailwindcss-displaymodes inside Tailwincss v4 core.

[wongjn]

I don't know, sorry!

[mrleblanc101]

@wongjn My bad, I thought you were a maintainer. I've opened a PR: #20199