Skip to content

Add display-mode variants for pwa #20199

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mrleblanc101 wants to merge 3 commits into
base: main
Choose a base branch
from
+127 −0
Open

Add display-mode variants for pwa #20199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7319b7e
Add display-mode variants
mrleblanc101 Jun 4, 2026
75ba05f
Fix display-mode tests
mrleblanc101 Jun 4, 2026
47dfc38
Add newer spec values
mrleblanc101 Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12355,6 +12355,12 @@ exports[`getVariants 1`] = `
"any-pointer-none",
"any-pointer-coarse",
"any-pointer-fine",
"standalone",
"minimal-ui",
"browser",
"fullscreen",
"picture-in-picture",
"window-controls-overlay",
"noscript",
],
},
Expand Down Expand Up @@ -13133,6 +13139,48 @@ exports[`getVariants 1`] = `
"selectors": [Function],
"values": [],
},
{
"hasDash": true,
"isArbitrary": false,
"name": "standalone",
"selectors": [Function],
"values": [],
},
{
"hasDash": true,
"isArbitrary": false,
"name": "minimal-ui",
"selectors": [Function],
"values": [],
},
{
"hasDash": true,
"isArbitrary": false,
"name": "browser",
"selectors": [Function],
"values": [],
},
{
"hasDash": true,
"isArbitrary": false,
"name": "fullscreen",
"selectors": [Function],
"values": [],
},
{
"hasDash": true,
"isArbitrary": false,
"name": "picture-in-picture",
"selectors": [Function],
"values": [],
},
{
"hasDash": true,
"isArbitrary": false,
"name": "window-controls-overlay",
"selectors": [Function],
"values": [],
},
{
"hasDash": true,
"isArbitrary": false,
Expand Down
72 changes: 72 additions & 0 deletions packages/tailwindcss/src/variants.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2249,6 +2249,78 @@ test('any-pointer-fine', async () => {
`)
})

test('standalone', async () => {
expect(await run(['standalone:flex'])).toMatchInlineSnapshot(`
"
@media (display-mode: standalone) {
.standalone\\:flex {
display: flex;
}
}
"
`)
})

test('minimal-ui', async () => {
expect(await run(['minimal-ui:flex'])).toMatchInlineSnapshot(`
"
@media (display-mode: minimal-ui) {
.minimal-ui\\:flex {
display: flex;
}
}
"
`)
})

test('browser', async () => {
expect(await run(['browser:flex'])).toMatchInlineSnapshot(`
"
@media (display-mode: browser) {
.browser\\:flex {
display: flex;
}
}
"
`)
})

test('fullscreen', async () => {
expect(await run(['fullscreen:flex'])).toMatchInlineSnapshot(`
"
@media (display-mode: fullscreen) {
.fullscreen\\:flex {
display: flex;
}
}
"
`)
})

test('picture-in-picture', async () => {
expect(await run(['picture-in-picture:flex'])).toMatchInlineSnapshot(`
"
@media (display-mode: picture-in-picture) {
.picture-in-picture\\:flex {
display: flex;
}
}
"
`)
})

test('window-controls-overlay', async () => {
expect(await run(['window-controls-overlay:flex'])).toMatchInlineSnapshot(`
"
@media (display-mode: window-controls-overlay) {
.window-controls-overlay\\:flex {
display: flex;
}
}
"
`)
})

test('scripting-none', async () => {
expect(await run(['noscript:flex'])).toMatchInlineSnapshot(`
"
Expand Down
7 changes: 7 additions & 0 deletions packages/tailwindcss/src/variants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1206,6 +1206,13 @@ export function createVariants(theme: Theme): Variants {
staticVariant('any-pointer-coarse', ['@media (any-pointer: coarse)'])
staticVariant('any-pointer-fine', ['@media (any-pointer: fine)'])

staticVariant('standalone', ['@media (display-mode: standalone)'])
staticVariant('minimal-ui', ['@media (display-mode: minimal-ui)'])
staticVariant('browser', ['@media (display-mode: browser)'])
staticVariant('fullscreen', ['@media (display-mode: fullscreen)'])
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot Jun 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 fullscreen name will collide with a :fullscreen pseudo-class variant

fullscreen already exists as a widely-supported CSS pseudo-class (:fullscreen from the Fullscreen API). These two concepts are semantically different: @media (display-mode: fullscreen) detects a PWA installed in fullscreen mode, while :fullscreen targets any element that entered fullscreen via element.requestFullscreen(). If Tailwind later adds the :fullscreen pseudo-class variant—which is a natural addition—both would claim the fullscreen: prefix, causing a breaking conflict. The other display-mode variants (following the pointer-none / any-pointer-coarse precedent) suggest a display-mode-fullscreen name would be unambiguous.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

staticVariant('picture-in-picture', ['@media (display-mode: picture-in-picture)'])
staticVariant('window-controls-overlay', ['@media (display-mode: window-controls-overlay)'])
Comment on lines +1209 to +1214
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot Jun 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Naming convention diverges from existing multi-value media feature pattern

Existing multi-value media features prefix variant names with the property: pointer-none, pointer-coarse, pointer-fine, any-pointer-none, etc. These display-mode variants break that pattern by using bare values (standalone, browser, fullscreen). Following the same convention would produce display-mode-standalone, display-mode-browser, etc., which avoids collision with other uses of generic terms like browser or standalone and makes it immediately clear these are media-feature variants rather than pseudo-class or state variants.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!


staticVariant('noscript', ['@media (scripting: none)'])

return variants
Expand Down