From b53fa096c92d830fc64b7cf69581496242583446 Mon Sep 17 00:00:00 2001 From: highoncomputers Date: Thu, 2 Jul 2026 16:09:28 +0530 Subject: [PATCH] fix: exclude iframes from focus-visible auto outline in Preflight (#20292) ## 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: file-f833142116d36e1e620290b97455f001 After: file-400d9214fedf5b43693e10580a4869de --------- Co-authored-by: root Co-authored-by: Kirk Loretz Co-authored-by: Robin Malfait --- CHANGELOG.md | 1 + integrations/cli/index.test.ts | 2 +- .../@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap | 2 +- packages/tailwindcss/preflight.css | 2 +- packages/tailwindcss/src/__snapshots__/index.test.ts.snap | 2 +- packages/tailwindcss/src/source-maps/source-map.test.ts | 4 ++-- 6 files changed, 7 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a8a0cbc1a..e6866fb88 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts index e742662be..a2b2ee4ab 100644 --- a/integrations/cli/index.test.ts +++ b/integrations/cli/index.test.ts @@ -2903,7 +2903,7 @@ test( border-color: inherit; border-collapse: collapse; } - :-moz-focusring { + :-moz-focusring:where(:not(iframe)) { outline: auto; } progress { diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap index d1f4c64ba..6d4823219 100644 --- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap +++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap @@ -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; } diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css index 753e79ef0..e7dd8ec4e 100644 --- a/packages/tailwindcss/preflight.css +++ b/packages/tailwindcss/preflight.css @@ -170,7 +170,7 @@ table { Use the modern Firefox focus style for all focusable elements. */ -:-moz-focusring { +:-moz-focusring:where(:not(iframe)) { outline: auto; } diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap index 04d331115..4a43ae7f9 100644 --- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap @@ -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; } diff --git a/packages/tailwindcss/src/source-maps/source-map.test.ts b/packages/tailwindcss/src/source-maps/source-map.test.ts index 25399e843..9238f495f 100644 --- a/packages/tailwindcss/src/source-maps/source-map.test.ts +++ b/packages/tailwindcss/src/source-maps/source-map.test.ts @@ -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 }