Skip to content

Conversation

bronisMateusz
Copy link

Summary

This PR replaces the deprecated clip property used in the sr-only utility with clip-path, and updates the corresponding reset in not-sr-only.

  • Closes tailwindlabs/tailwindcss#18768
  • Replaces clip: rect(0, 0, 0, 0); with clip-path: inset(50%); in sr-only
  • Replaces clip: auto; with clip-path: none; in not-sr-only
  • Updates unit test snapshots to reflect the new CSS output

Rationale:

  • clip is deprecated and flagged by modern linters; clip-path is the recommended modern alternative while preserving the intended visually-hidden behavior.

Before:

.sr-only {
  clip: rect(0, 0, 0, 0);
}

.not-sr-only {
  clip: auto;
}

After:

.sr-only {
  clip-path: inset(50%);
}

.not-sr-only {
  clip-path: none;
}

@bronisMateusz bronisMateusz requested a review from a team as a code owner August 20, 2025 07:56
@thecrypticace
Copy link
Contributor

At one time using clip-path: inset(50%) would cause massive scroll performance problems in Chrome. Though this was many years ago. Will definitely need testing to ensure this isn't a problem any longer before we do this.

@thecrypticace thecrypticace self-assigned this Aug 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Suggestion: Replace deprecated clip in sr-only with clip-path
2 participants