Apply clip-path to caption elements in table

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 `<caption>` in Firefox
 
 ## [4.3.3] - 2026-07-16
 

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('')

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 `<caption>` 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'),
+      ]),
   ])
 
   /**