Suggestion: Replace deprecated `clip` in `sr-only` with `clip-path`

[bronisMateusz]

What version of Tailwind CSS are you using?

v4.1.12

Describe your issue

Use any markup with sr-only, e.g.:

<span class="sr-only">Hidden text for screen readers</span>

The sr-only utility currently relies on the deprecated clip property (clip: rect(0, 0, 0, 0);). According to MDN, clip is deprecated and authors are encouraged to use clip-path instead. This causes:

• Linting errors in modern toolchains (e.g., stylelint property-no-deprecated)
• Risk of future breakage if browsers remove support

Reference: MDN: clip — Deprecated; authors are encouraged to use clip-path

Proposed solution

Replace the use of clip in sr-only with clip-path: inset(50%), which preserves the intended visually-hidden behavior without using deprecated properties.

staticUtility('sr-only', [
    ['position', 'absolute'],
    ['width', '1px'],
    ['height', '1px'],
    ['padding', '0'],
    ['margin', '-1px'],
    ['overflow', 'hidden'],
    ['clip-path', 'inset(50%)'],
    ['white-space', 'nowrap'],
    ['border-width', '0'],
  ])
  staticUtility('not-sr-only', [
    ['position', 'static'],
    ['width', 'auto'],
    ['height', 'auto'],
    ['padding', '0'],
    ['margin', '0'],
    ['overflow', 'visible'],
    ['clip-path', 'none'],
    ['white-space', 'normal'],
  ])

Notes:

• Keeps the same accessibility semantics (element remains available to AT, not visually rendered).
• Removes reliance on a deprecated property.
• Plays well with modern linters and build pipelines.

Optional fallback (only if supporting very old browsers is required):

@supports (clip-path: inset(50%)) {
  .sr-only { clip-path: inset(50%); }
}
/* Otherwise keep current behavior or document a linter override */

Expected outcome:

• No visual or behavioral regressions for visually-hidden content.
• No linter errors related to deprecated CSS properties.
• Aligns Tailwind utilities with current CSS standards per MDN.