diff --git a/CHANGELOG.md b/CHANGELOG.md index 338a78eb9..41a52c4b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Only normalize top-level `and`, `or`, and `not` keywords in `supports-[…]` variants (e.g. `selector(a: not (.foo))` → `selector(a:not(.foo))`) ([#20420](https://github.com/tailwindlabs/tailwindcss/pull/20420)) - Don't warn about Angular's `::ng-deep` and `:host-context()` when optimizing CSS ([#20434](https://github.com/tailwindlabs/tailwindcss/pull/20434)) - Don't generate CSS for candidates containing an empty additional modifier (e.g. `bg-red-500/50/` and `group-hover/foo//bar:flex`) ([#20466](https://github.com/tailwindlabs/tailwindcss/pull/20466)) +- Ensure `sr-only` hides a table's `` in Firefox ## [4.3.3] - 2026-07-16 diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 66b051d57..7d8d80e34 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -19,6 +19,10 @@ test('sr-only', async () => { position: absolute; overflow: hidden; } + + .sr-only > caption { + clip-path: inset(50%); + } " `) expect(await run(['-sr-only', 'sr-only-[var(--value)]', 'sr-only/foo'])).toEqual('') @@ -37,6 +41,10 @@ test('not-sr-only', async () => { position: static; overflow: visible; } + + .not-sr-only > caption { + clip-path: none; + } " `) expect(await run(['-not-sr-only', 'not-sr-only-[var(--value)]', 'not-sr-only/foo'])).toEqual('') diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 477559d7e..f8e66925c 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -599,6 +599,13 @@ export function createUtilities(theme: Theme) { ['clip-path', 'inset(50%)'], ['white-space', 'nowrap'], ['border-width', '0'], + // Firefox applies `clip-path` to the inner table box instead of the table + // wrapper box, so a table's `` is not clipped along with it. + // Same root cause as https://bugzilla.mozilla.org/show_bug.cgi?id=1998269 (for `opacity`). + () => + styleRule('& > caption', [ + decl('clip-path', 'inset(50%)'), + ]), ]) staticUtility('not-sr-only', [ ['position', 'static'], @@ -609,6 +616,10 @@ export function createUtilities(theme: Theme) { ['overflow', 'visible'], ['clip-path', 'none'], ['white-space', 'normal'], + () => + styleRule('& > caption', [ + decl('clip-path', 'none'), + ]), ]) /**