Why it matters
A dozen ad-hoc z-index values (10, 20, 50, 999, 9999…) means stacking is managed by escalation; the next overlay needs a bigger number and popovers end up under headers.
How to fix it
Define a small layer scale as tokens (e.g. base 0, sticky 10, dropdown 20, overlay 30, modal 40, toast 50) and use isolation: isolate to create local stacking contexts.
Example
@theme { --z-sticky: 10; --z-overlay: 30; --z-modal: 40; --z-toast: 50; }<header className="z-(--z-sticky)" />More lint rules
void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.
no-reduced-motionAnimations present but no `prefers-reduced-motion` handling anywhereoverflow-x-hidden-sticky`overflow-x: hidden` on html/body/root wrapper breaks `position: sticky`vh-heroHero sized with `100vh` / `h-screen`will-change-static`will-change` applied statically to many elementshardcoded-colorsHard-coded colors in components instead of tokensmissing-metadataPage has no `metadata` / `generateMetadata` and inherits only the root titlemissing-metadata-baseRoot layout metadata has no `metadataBase`canonical-in-root-layoutCanonical URL set in the root layout