wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: exclude iframes from focus-visible auto outline in Preflight (#20292)

Browse source 
## Description

Firefox's UA stylesheet already sets `iframe:focus-visible {
outline-style: none; }`, so Preflight's `:-moz-focusring { outline:
auto; }` rule overrides that and applies an unwanted auto outline to
focused iframes.

Adding `:where(:not(iframe))` to the selector preserves the improved
focus ring behavior for all other elements while respecting Firefox's
native iframe focus styling.

Fixes #19795

Edit by @RobinMalfait 

## Test plan

Before:
<img width="1054" height="383"
alt="file-f833142116d36e1e620290b97455f001"
src="https://github.com/user-attachments/assets/81aa170b-2cef-4964-934d-61f258335e1a"
/>


After:
<img width="1056" height="310"
alt="file-400d9214fedf5b43693e10580a4869de"
src="https://github.com/user-attachments/assets/8f8bb81d-6070-425d-8820-327bf9e88e79"
/>

---------

Co-authored-by: root <root@localhost.localdomain>
Co-authored-by: Kirk Loretz <kirk-loretz-fsn@users.noreply.github.com>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This commit is contained in:
highoncomputers 2026-07-02 16:09:28 +05:30 • committed by GitHub
parent ef79119d4e
commit b53fa096c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 7 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Allow `@tailwindcss/cli` in `--watch` mode to use polling with `--poll` when filesystem events are unreliable or unavailable ([#20297](https://github.com/tailwindlabs/tailwindcss/pull/20297))
- Canonicalization: match arbitrary hex colors against theme colors case-insensitively (e.g. `bg-[#fff]` and `bg-[#FFF]` → `bg-white`) ([#20298](https://github.com/tailwindlabs/tailwindcss/pull/20298))
- Prevent Preflight from overriding Firefox's native `iframe:focus-visible` outline styles ([#20292](https://github.com/tailwindlabs/tailwindcss/pull/20292))
## [4.3.2] - 2026-06-26

2
integrations/cli/index.test.ts
View file

@ -2903,7 +2903,7 @@ test(
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
:-moz-focusring:where(:not(iframe)) {
outline: auto;
}
progress {

2
packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
View file

@ -110,7 +110,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
border-collapse: collapse;
}
:-moz-focusring {
:-moz-focusring:where(:not(iframe)) {
outline: auto;
}

2
packages/tailwindcss/preflight.css
View file

@ -170,7 +170,7 @@ table {
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
:-moz-focusring:where(:not(iframe)) {
outline: auto;
}

2
packages/tailwindcss/src/__snapshots__/index.test.ts.snap
View file

@ -226,7 +226,7 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
border-collapse: collapse;
}
:-moz-focusring {
:-moz-focusring:where(:not(iframe)) {
outline: auto;
}

4
packages/tailwindcss/src/source-maps/source-map.test.ts
View file

@ -338,8 +338,8 @@ test('source maps trace back to @import location', async ({ expect }) => {
^^^^^^^^^^^^^^^^^^^^^^^^^ CS @ 73:4-29 | ^^^^^^^^^^^^^^^^^^^^^^^^^ CS @ 166:2-27
| 167 }
74 } |
75 :-moz-focusring { | 173 :-moz-focusring {
^^^^^^^^^^^^^^^^ CT @ 75:2-18 | ^^^^^^^^^^^^^^^^ CT @ 173:0-16
75 :-moz-focusring:where(:not(iframe)) { | 173 :-moz-focusring:where(:not(iframe)) {
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CT @ 75:2-38 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ CT @ 173:0-36
76 outline: auto; | 174 outline: auto;
^^^^^^^^^^^^^ CU @ 76:4-17 | ^^^^^^^^^^^^^ CU @ 174:2-15
| 175 }