Skip to content

Rule · Lint

transition: all / transition-all

lint/transition-allwarnvoid lintupdated

Why it matters

Transitioning all animates properties you never meant to (layout, colors on theme switch, box-shadow), triggers layout/paint work on every change and makes motion feel mushy.

How to fix it

List the properties: transition-[transform,opacity], transition-colors, transition-transform, or transition: transform 160ms var(--ease-out), opacity 160ms.

Example

tsx
<button className="transition-[transform,background-color] duration-150 ease-out active:scale-[0.97]" />

References

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.