Skip to content

fix(styles): restore transition timing Tailwind was silently dropping #6165

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 1 commit into from
Aug 1, 2026
Merged

fix(styles): restore transition timing Tailwind was silently dropping #6165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export function HeroPlatformLoop() {
</div>
<div
className={cn(
'h-full shrink-0 overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]',
'h-full shrink-0 overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-200 [transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)]',
stageOpen ? 'w-1/2 border-l' : 'w-0 min-w-0 border-l-0'
)}
>
Expand Down
4 changes: 2 additions & 2 deletions apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export function HeroWorkflowStage({
stroke='var(--workflow-edge)'
strokeWidth={2}
strokeLinecap='round'
className='transition-[stroke-dashoffset] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] [stroke-dasharray:1]'
className='transition-[stroke-dashoffset] duration-500 [stroke-dasharray:1] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
style={{ strokeDashoffset: visible ? 0 : 1 } as CSSProperties}
/>
)
Expand All @@ -156,7 +156,7 @@ export function HeroWorkflowStage({
<div
key={block.id}
className={cn(
'pointer-events-none absolute transition-[opacity,scale] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]',
'pointer-events-none absolute transition-[opacity,scale] duration-300 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
built ? 'scale-100 opacity-100' : 'scale-[0.94] opacity-0'
)}
style={{ left: block.x, top: block.y, width: BLOCK_WIDTH }}
Expand Down
4 changes: 2 additions & 2 deletions apps/sim/app/(landing)/components/hero/components/hero-visual/block-handles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function BlockHandles({ block, handlesVisible = true }: BlockHandlesProps
<span
aria-hidden
className={cn(
'-translate-y-1/2 absolute top-5 left-[-7px] h-5 w-[7px] rounded-l-[2px] bg-[var(--workflow-edge)] transition-opacity duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
'-translate-y-1/2 absolute top-5 left-[-7px] h-5 w-[7px] rounded-l-[2px] bg-[var(--workflow-edge)] transition-opacity [transition-duration:360ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
handlesVisible ? 'opacity-100' : 'opacity-0'
)}
/>
Expand All @@ -30,7 +30,7 @@ export function BlockHandles({ block, handlesVisible = true }: BlockHandlesProps
<span
aria-hidden
className={cn(
'-translate-y-1/2 absolute top-5 right-[-7px] h-5 w-[7px] rounded-r-[2px] bg-[var(--workflow-edge)] transition-opacity duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
'-translate-y-1/2 absolute top-5 right-[-7px] h-5 w-[7px] rounded-r-[2px] bg-[var(--workflow-edge)] transition-opacity [transition-duration:360ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
handlesVisible ? 'opacity-100' : 'opacity-0'
)}
/>
Expand Down
16 changes: 8 additions & 8 deletions apps/sim/app/(landing)/components/hero/components/hero-visual/hero-visual.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -962,7 +962,7 @@ export function HeroVisual() {
GitHub block. FOCUS is the identity transform (block 1 centered); only
the pull-out animates. */}
<div
className='absolute inset-0 transform-gpu transition-transform duration-[1700ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform'
className='absolute inset-0 transform-gpu transition-transform will-change-transform [transition-duration:1700ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
style={{
transform: sceneTransform,
transformOrigin: 'center',
Expand All @@ -971,7 +971,7 @@ export function HeroVisual() {
>
{showCard && (
<div
className='absolute inset-0 translate-y-0 scale-100 transition-opacity duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)]'
className='absolute inset-0 translate-y-0 scale-100 transition-opacity [transition-duration:420ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
style={{ opacity: workflowContentFaded ? 0 : 1 }}
>
<div
Expand All @@ -987,7 +987,7 @@ export function HeroVisual() {
// slide beats are written imperatively (a transition here would
// fight the per-frame writes).
(phase === 'toSend' || phase === 'zoomSend' || phase === 'answer') &&
'transition-transform duration-[850ms] ease-[cubic-bezier(0.65,0,0.35,1)]'
'transition-transform [transition-duration:850ms] [transition-timing-function:cubic-bezier(0.65,0,0.35,1)]'
)}
style={zoomStyle}
>
Expand Down Expand Up @@ -1030,7 +1030,7 @@ export function HeroVisual() {
{/* Edges (scene space, origin = panel center). Drawn as the camera
follows the connection to each revealed block. */}
<svg
className='absolute top-1/2 left-1/2 overflow-visible transition-opacity duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)]'
className='absolute top-1/2 left-1/2 overflow-visible transition-opacity [transition-duration:420ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
width='1'
height='1'
fill='none'
Expand All @@ -1047,7 +1047,7 @@ export function HeroVisual() {
stroke='var(--workflow-edge)'
strokeWidth={2 * WORKFLOW_FOCUS_SCALE}
strokeLinecap='round'
className='transition-[stroke-dashoffset] ease-[cubic-bezier(0.22,1,0.36,1)] [stroke-dasharray:1]'
className='transition-[stroke-dashoffset] [stroke-dasharray:1] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
style={
{
strokeDashoffset: drawn ? 0 : 1,
Expand Down Expand Up @@ -1078,7 +1078,7 @@ export function HeroVisual() {
<div
key={block.id}
className={cn(
'absolute transform-gpu transition-[opacity,transform,width,height,top,left] duration-[520ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform',
'absolute transform-gpu transition-[opacity,transform,width,height,top,left] will-change-transform [transition-duration:520ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
showKbShell &&
'overflow-hidden rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-[var(--shadow-overlay)]'
)}
Expand Down Expand Up @@ -1143,7 +1143,7 @@ export function HeroVisual() {
// GPU-promoted: its per-frame transform writes composite on their own
// layer, so the slide + dock read as smooth sub-pixel motion instead of
// jittering as the position pixel-snaps each frame.
'pointer-events-none absolute top-0 left-0 z-20 transform-gpu transition-opacity duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] will-change-transform',
'pointer-events-none absolute top-0 left-0 z-20 transform-gpu transition-opacity duration-300 will-change-transform [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
loaderFading ? 'opacity-0' : 'opacity-100'
)}
style={{ transformOrigin: '0 0' }}
Expand All @@ -1164,7 +1164,7 @@ export function HeroVisual() {

<div
ref={cursorElRef}
className='pointer-events-none absolute top-0 left-0 z-30 transition-opacity duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]'
className='pointer-events-none absolute top-0 left-0 z-30 transition-opacity duration-200 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]'
style={{ opacity: showCursor ? 1 : 0 }}
>
<svg
Expand Down
19 changes: 10 additions & 9 deletions apps/sim/app/(landing)/components/hero/components/hero-visual/stage-home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,8 @@ interface StageHomeProps {
}

/** Staggered enter for a chat bubble - translateY + opacity + blur, interruptible. */
const ENTER_BASE = 'transition-[opacity,transform,filter] ease-[cubic-bezier(0.2,0,0,1)]'
const ENTER_BASE =
'transition-[opacity,transform,filter] [transition-timing-function:cubic-bezier(0.2,0,0,1)]'
const enterState = (shown: boolean) =>
shown ? 'translate-y-0 opacity-100 blur-0' : 'translate-y-1.5 opacity-0 blur-[3px]'

Expand Down Expand Up @@ -220,7 +221,7 @@ export function StageHome({
morphs to a block. */}
<div
className={cn(
'overflow-hidden text-center transition-[height,opacity] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)]',
'overflow-hidden text-center transition-[height,opacity] duration-300 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
mode === 'compose'
? 'h-[40px] opacity-100'
: mode === 'sending' || mode === 'thinking'
Expand Down Expand Up @@ -251,8 +252,8 @@ export function StageHome({
// and read as jitter. Every other beat eases width/height/transform with
// the shared curve.
holdCardHeight
? 'transition-[width,transform] duration-[620ms] ease-[cubic-bezier(0.22,1,0.36,1)]'
: 'transition-[width,height,transform] duration-[620ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
? 'transition-[width,transform] [transition-duration:620ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
: 'transition-[width,height,transform] [transition-duration:620ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
// Nudge up to cancel the chat column's greeting+gap offset, so the
// card centers exactly where the focused workflow block lands.
isBlock && '-translate-y-[10px]'
Expand Down Expand Up @@ -282,7 +283,7 @@ export function StageHome({
<div
ref={contentRef}
className={cn(
'absolute inset-x-0 flex flex-col gap-2 px-2.5 py-2 transition-opacity duration-[220ms] ease-[cubic-bezier(0.23,1,0.32,1)]',
'absolute inset-x-0 flex flex-col gap-2 px-2.5 py-2 transition-opacity [transition-duration:220ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
holdCardHeight ? 'bottom-0' : 'top-0',
isBlock && 'pointer-events-none opacity-0'
)}
Expand All @@ -297,7 +298,7 @@ export function StageHome({
<div
ref={inputRef}
className={cn(
'min-h-[24px] px-1 py-1 font-body text-[15px] text-[var(--text-primary)] leading-[24px] tracking-[-0.015em] transition-opacity duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]',
'min-h-[24px] px-1 py-1 font-body text-[15px] text-[var(--text-primary)] leading-[24px] tracking-[-0.015em] transition-opacity duration-200 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
isCompose ? 'opacity-100' : 'opacity-0',
!inputInFlow && 'pointer-events-none absolute inset-x-0 top-0'
)}
Expand Down Expand Up @@ -346,7 +347,7 @@ export function StageHome({
ref={sendRef}
aria-hidden='true'
className={cn(
'flex size-[28px] shrink-0 items-center justify-center rounded-full bg-[#383838] transition-[opacity,transform,background-color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)]',
'flex size-[28px] shrink-0 items-center justify-center rounded-full bg-[#383838] transition-[opacity,transform,background-color] duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
// Visible only while composing; once send is hit the root loader's
// settled orb takes its place (it stays laid out as the loader's
// measure + slide-from target).
Expand All @@ -370,7 +371,7 @@ export function StageHome({
strokeLinecap='round'
strokeLinejoin='round'
className={cn(
'transition-[stroke-dashoffset] duration-[520ms] ease-[cubic-bezier(0.23,1,0.32,1)] [stroke-dasharray:1]',
'transition-[stroke-dashoffset] [stroke-dasharray:1] [transition-duration:520ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
isCompose ? '[stroke-dashoffset:0]' : '[stroke-dashoffset:1]'
)}
/>
Expand All @@ -386,7 +387,7 @@ export function StageHome({
<div
aria-hidden='true'
className={cn(
'absolute inset-x-0 top-0 transition-opacity duration-300 ease-[cubic-bezier(0.23,1,0.32,1)]',
'absolute inset-x-0 top-0 transition-opacity duration-300 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
// Hold off until the chat content (≈220ms fade) is gone, then fade in.
isBlock ? 'opacity-100 [transition-delay:280ms]' : 'pointer-events-none opacity-0'
)}
Expand Down
5 changes: 3 additions & 2 deletions apps/sim/app/(landing)/components/hero/components/hero-visual/stage-workflow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,8 @@ export function StageWorkflow({ stage }: StageWorkflowProps) {
<div
className={cn(
'absolute top-0 left-0',
animate && 'transition-transform duration-[1700ms] ease-[cubic-bezier(0.22,1,0.36,1)]'
animate &&
'transition-transform [transition-duration:1700ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
)}
style={{
width: CANVAS.width,
Expand All @@ -102,7 +103,7 @@ export function StageWorkflow({ stage }: StageWorkflowProps) {
stroke='var(--workflow-edge)'
strokeWidth={2}
strokeLinecap='round'
className='transition-[stroke-dashoffset] duration-[700ms] ease-[cubic-bezier(0.22,1,0.36,1)] [stroke-dasharray:1]'
className='transition-[stroke-dashoffset] [stroke-dasharray:1] [transition-duration:700ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
// Edges stay undrawn while focused; once the camera pulls out they
// draw in order (the second trails the first) as each target is revealed.
style={
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export function WorkflowBlock({
<div className='relative w-[250px] rounded-[13px] border border-[var(--border-1)] bg-[var(--surface-2)] shadow-sm'>
<div
className={cn(
'transition-opacity duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
'transition-opacity [transition-duration:360ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
contentVisible ? 'opacity-100' : 'opacity-0'
)}
>
Expand Down
4 changes: 2 additions & 2 deletions ...ding)/components/landing-preview/components/landing-preview-chat/landing-preview-chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export function LandingPreviewChat({ chat, chatName, animationKey }: LandingPrev
<>
<div
className={cn(
'max-w-[85%] self-end rounded-2xl bg-[var(--surface-1)] px-3.5 py-2 text-[13.5px] text-[var(--text-primary)] leading-[1.45] transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.2,0,0,1)]',
'max-w-[85%] self-end rounded-2xl bg-[var(--surface-1)] px-3.5 py-2 text-[13.5px] text-[var(--text-primary)] leading-[1.45] transition-[opacity,transform] duration-300 [transition-timing-function:cubic-bezier(0.2,0,0,1)]',
showUser ? 'translate-y-0 opacity-100' : 'translate-y-1.5 opacity-0'
)}
>
Expand All @@ -101,7 +101,7 @@ export function LandingPreviewChat({ chat, chatName, animationKey }: LandingPrev
{showAssistant && (
<p
className={cn(
'max-w-[92%] text-[13.5px] text-[var(--text-primary)] leading-[1.5] transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.2,0,0,1)]',
'max-w-[92%] text-[13.5px] text-[var(--text-primary)] leading-[1.5] transition-[opacity,transform] duration-300 [transition-timing-function:cubic-bezier(0.2,0,0,1)]',
showAssistant ? 'translate-y-0 opacity-100' : 'translate-y-1.5 opacity-0'
)}
>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/(landing)/components/navbar/components/logo-mark/logo-mark.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export function LogoMark({ children }: LogoMarkProps) {
>
<span
className={cn(
'relative z-10 transition-opacity duration-100 ease-[cubic-bezier(0.23,1,0.32,1)]',
'relative z-10 transition-opacity duration-100 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
hovered && 'opacity-0'
)}
>
Expand Down
2 changes: 1 addition & 1 deletion ...app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-platform-loop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export function EnterprisePlatformLoop({
</div>
<div
className={cn(
'h-full shrink-0 overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]',
'h-full shrink-0 overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-200 [transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)]',
stageOpen ? 'w-1/2 border-l' : 'w-0 min-w-0 border-l-0'
)}
>
Expand Down
6 changes: 3 additions & 3 deletions apps/sim/app/(landing)/enterprise/components/feature-graphics/build-methods-graphic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ export function BuildMethodsGraphic() {
>
<FeaturePlatformPanel
className={cn(
'top-5 bg-[var(--white)] transition-[transform,opacity] duration-[380ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
'top-5 bg-[var(--white)] transition-[transform,opacity] [transition-duration:380ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
phase === 'idle' && 'transition-none',
editorExited ? 'translate-y-16 opacity-0' : 'translate-y-0 opacity-100'
)}
Expand Down Expand Up @@ -274,7 +274,7 @@ export function BuildMethodsGraphic() {
<div
aria-hidden='true'
className={cn(
'absolute top-5 right-0 bottom-0 left-0 overflow-hidden rounded-tl-xl border-[var(--border-1)] border-t border-l bg-[var(--white)] shadow-sm transition-[transform,opacity] duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
'absolute top-5 right-0 bottom-0 left-0 overflow-hidden rounded-tl-xl border-[var(--border-1)] border-t border-l bg-[var(--white)] shadow-sm transition-[transform,opacity] [transition-duration:420ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
phase === 'idle' && 'transition-none',
chatOpen ? 'translate-y-0 opacity-100' : 'translate-y-6 opacity-0'
)}
Expand All @@ -297,7 +297,7 @@ export function BuildMethodsGraphic() {

<div
className={cn(
'absolute right-3 bottom-5 left-5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm transition-transform duration-[450ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
'absolute right-3 bottom-5 left-5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm transition-transform [transition-duration:450ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
phase === 'idle' && 'transition-none',
composerVisible ? 'translate-y-0' : 'translate-y-[130%]'
)}
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const FULLSCREEN_SUFFIXES = ['/upgrade'] as const

/** Slide timing for the fullscreen sidebar collapse and content shift. */
const SLIDE_TRANSITION =
'duration-[175ms] ease-[cubic-bezier(0.25,0.1,0.25,1)] motion-reduce:transition-none'
'[transition-duration:175ms] [transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)] motion-reduce:transition-none'

/**
* The peek card's floating chrome.
Expand Down
Loading
Loading