Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Remove focus outlines accessibly, not with outline-none
When suppressing the default focus outline for visual design, use an accessibility-friendly approach (outline-hidden / forced-colors fallback) instead of outline-none, which strips the keyboard focus indicator entirely.
Bad example
| 1 | <input className="focus:outline-none" /> |
Explanation (EN)
focus:outline-none completely removes the outline, including for keyboard users and Windows high-contrast (forced-colors) mode, leaving no visible focus indicator.
Objašnjenje (HR)
focus:outline-none u potpunosti uklanja outline, ukljucujuci i za korisnike tipkovnice te Windows nacin visokog kontrasta (forced-colors), pa ne ostaje nikakav vidljiv indikator fokusa.
Good example
| 1 | <input className="focus:outline-hidden" /> |
Explanation (EN)
outline-hidden visually removes the outline for the design but preserves a focus indicator in forced-colors mode, keeping the control accessible to keyboard users.
Objašnjenje (HR)
outline-hidden vizualno uklanja outline radi dizajna, ali zadrzava indikator fokusa u forced-colors nacinu, cime kontrola ostaje pristupacna korisnicima tipkovnice.
Notes (EN)
Tailwind v4 introduced outline-hidden specifically as the a11y-safe replacement for the old outline-none behavior; never remove a focus indicator without providing an alternative visible focus style.
Bilješke (HR)
Tailwind v4 uveo je outline-hidden bas kao pristupacnu zamjenu za staro ponasanje outline-none; nikad ne uklanjaj indikator fokusa bez alternativnog vidljivog stila fokusa.
Exceptions / Tradeoffs (EN)
Acceptable only if you replace the native outline with another clearly visible focus style (e.g. a ring or border change) that also works in forced-colors mode.
Iznimke / Tradeoffi (HR)
Prihvatljivo samo ako nativni outline zamijenis drugim jasno vidljivim stilom fokusa (npr. ring ili promjena obruba) koji radi i u forced-colors nacinu.