remove-color-transition

To remove color transitions from hover and focus states, you must strip transition-colors, transition-property, or transition: all rules affecting color properties. This forces UI color updates to occur instantly instead of fading, while preserving non-color motion like transform or opacity.

Disabling Tailwind transition-colors without breaking transform animations requires precise scoping to color properties. You must remove only the color-related transition utilities and duration/ease variables, leaving transform, opacity, and filter transition behavior intact and validated.

Yes, this approach works with CSS-in-JS libraries like styled-components and Emotion. It targets and removes color transition behavior within common CSS-in-JS patterns, React/Vue SFCs, inline styles, and plain CSS/SCSS to ensure color updates happen instantly across different frontend styling architectures.

Your UI color changes still fade because removing transition-duration is insufficient if transition: all or state-based color variants remain active. You must completely remove all transition rules specifically targeting color properties like background-color and border-color to achieve instant updates.

Yes, you can apply instant color updates to specific interaction states like dark mode, active, or disabled. The removal of color transitions can be scoped precisely to target state-based color variants, prompting for clarification only when the intent is ambiguous.

The best way to make caret-color and accent-color update instantly is to remove all color-related CSS transition and delay behavior. This precisely targets properties like fill, stroke, text-decoration-color, and accent-color, ensuring immediate visual feedback without leaving unused duration utilities.