Last updated on February 18, 2026

Transition Property

Edit

Usage

Please refer to the documentation on the Tailwind CSS website

Transitions are powered by react-native-reanimated and support smooth interpolation between style values when classes change.

Supported Features

  • Numeric property transitions (e.g. width, height, opacity)
  • Color transitions with proper interpolation
  • Transitions triggered by class changes on rerender
  • Transitions triggered by pseudo-class interactions (e.g. :active)
  • Transitions combined with group parent states

Compatibility

ClassSupport
transition
🧪 Experimental Support
transition-all
🧪 Experimental Support
transition-colors
🧪 Experimental Support
transition-opacity
🧪 Experimental Support
transition-transform
🧪 Experimental Support
transition-{n}
🧪 Experimental Support
transition-[n]
🧪 Experimental Support
transition-shadow
🌐 Web only
Legend

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

On this page