Class-string rewrites (layer 2)

Apply these across ALL class strings (className, cva definitions, cn calls), including app code. They are safe, mechanical rewrites.

Data-attribute selectors

Animation idiom

Radix (tw-animate/keyframes): data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0

Base UI (transition + starting/ending styles): transition-[opacity,transform] data-starting-style:opacity-0 data-ending-style:opacity-0 (plus translate/scale equivalents).

Do not translate animate-in/out utilities 1:1; restate the intent with data-starting-style: / data-ending-style: transitions. When the original uses per-side slide classes, keep the data-[side=...] or data-[swipe-direction=...] parameterization.

CSS variables

Element changes kill pseudo-class variants

When a part's rendered element changes from a form control to a generic element (checkbox/switch/radio Roots render <span> in Base UI), disabled: and :disabled Tailwind variants become dead code. Replace them with data-disabled: equivalents. (Note: the shadcn base registry's checkbox still carries the dead disabled:* classes; treat that as an upstream quirk, not a pattern to copy.)

Disabled-state hooks

Some Base UI triggers surface disabled state as aria-disabled rather than the disabled attribute (accordion trigger, tabs tab). Where the radix code used disabled:opacity-50, add or substitute aria-disabled:opacity-50 according to the wrapper's reference file.