fix(styles): restore transition timing Tailwind was silently dropping - #6165
Conversation
`tailwindcss-animate` adds a `duration-*` utility for `animation-duration`, which collides with core's `transition-duration`. For a named value Tailwind emits both rules, but for an arbitrary value it cannot pick one — so it drops the class entirely and warns. The result is 52 usages across 13 files that produced **no CSS at all**. Elements marked `transition-transform duration-[1700ms] ease-[cubic-bezier(0.22,1,0.36,1)]` had neither a duration nor an easing function: they snapped instead of animating. Most of it is the landing hero. Verified by compiling the stylesheet on both sides: transition-duration: 1700ms before=0 after=1 transition-duration: 420ms before=0 after=1 transition-duration: 175ms before=0 after=1 transition-timing-function: cubic-bezier(0.22,1,0.36,1) before=0 after=1 transition-timing-function: cubic-bezier(0.23,1,0.32,1) before=0 after=1 The stylesheet grows 1,425 bytes — exactly the rules that were missing — and the 16 ambiguity warnings on every dev start go to zero. Every usage is in a transition context (`transition-opacity`, `transition-transform`, `transition-[...]`); none sits alongside an `animate-*` utility, so `transition-duration`/`transition-timing-function` is the right half of the collision in all 52 cases.
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
PR SummaryLow Risk Overview Across 13 files, those classes are replaced with explicit Reviewed by Cursor Bugbot for commit 04c4d8e. Configure here. |
Summary
tailwindcss-animateadds aduration-*utility foranimation-duration, colliding with core'stransition-duration— for arbitrary values Tailwind can't pick one, so it drops the class entirely and warnstransition-*utilities (150ms,cubic-bezier(0.4,0,0.2,1))[transition-duration:…]/[transition-timing-function:…]form, which is unambiguousbun run dev:fullThis is a visible change, not a no-op
Every affected element was animating — just at 150ms with the default curve instead of what the code asked for. Nothing snapped; things were simply too fast and eased wrong.
All 31
ease-[cubic-bezier(…)]usages were also running on the defaultcubic-bezier(0.4,0,0.2,1)rather than their intended curve.Expect the landing hero to visibly slow down — the two 1700ms transitions were running ~11x too fast. That is the intended design speed finally taking effect, but it is a real visual change and worth a look before merge.
Verification
Compiled the stylesheet on both sides:
Every usage sits in a transition context (
transition-opacity,transition-transform,transition-[...]); none is alongside ananimate-*utility, sotransition-duration/transition-timing-functionis the correct half of the collision in all 52 cases.Type of Change
Testing
Verified by compiling the stylesheet before and after and diffing the emitted rules (above).
tsc --noEmitclean,bun run lintclean, landing tests pass. Not visually diffed in a browser — given this changes animation speed on the landing hero, that check is worth doing before merge.Checklist