Preflight applies auto outline to focus-visible iframes

[kirk-loretz-fsn]

What version of Tailwind CSS are you using?

v4.2.1

What build tool (or framework if it abstracts the build tool) are you using?

N/A (but Vite 7.3.1)

What version of Node.js are you using?

N/A (v24.14.0)

What browser are you using?

Firefox 148.0.2

What operating system are you using?

• Windows 11
• Linux Mint 22

Reproduction URL

https://play.tailwindcss.com/8DS9aZHs7j

Describe your issue

1. Open the DevTools Inspector and select the #problem-child iframe.
2. Toggle on the :focus-visible pseudo-class for the iframe.
   a. See the auto-style outline on the iframe.
3. Disable the outline: auto; rule from Tailwind in the DevTools.
   a. See that the iframe does not have an outline.

(In my project, tabbing through the page to focus the input inside an iframe triggers :focus-visible on the iframe, but I was unable to replicate this in the playground. Manually turning on :focus-visible achieves the same result.)

Deleting this rule would fix the problem:

tailwindcss/packages/tailwindcss/preflight.css

Lines 173 to 175 in a4be983

	:-moz-focusring {
	outline: auto;
	}

This style was added in #5082 to make the improved focus ring apply to links, but Firefox applies it to links now. (Open resource://gre-resources/ua.css in FF and search for :focus-visible.¹)

Or if you want to keep this rule, I would ask that the selector be changed to :-moz-focusring:where(:not(iframe)). Firefox itself sets iframe:focus-visible { outline-style: none; } in resource://gre-resources/html.css, so it doesn't apply auto outline to iframes.

Footnotes

1. Firefox turns :-moz-focusring into :focus-visible, which you can see by running this code in the DevTools console.

   (() => { const s = new CSSStyleSheet(); s.replaceSync(":-moz-focusring { outline: auto; }"); return s.cssRules[0].cssText; })();
   

   ↩