React + Tailwind CSS: Transition on margin

Question

I need to add a transition to a margin on an element with Tailwind. I want the margin to do a transition smoothly.

<div 
  id="thumb" 
  className={`transition-spacing duration-300 ease-in-out ${switchState ? "ml-auto" : "mr-auto"}`}
>
</div>

Now it just instantly switches the margin from mr-auto to ml-auto without a transition. Here is my tailwind config for the transitions:

transitionProperty: {
  width: 'width',
  spacing: 'margin, padding',
}

I can verify that the switchState works. Why doesn't the transition work?

zonay zonay · Accepted Answer · 2020-12-09T17:13:47

You can animate properties only between two numeric values.

Consider this snippet:

<div class="container group">
  <div class="bg-yellow-600 w-12 h-12 ml-0 group-hover:ml-96 transform duration-300"></div>
</div>

Briefly, ml-auto and mr-auto are not proper css properties to animate the element. You need to use absolute positioning or numeric margin definitions.

Animatable CSS properties

React + Tailwind CSS: Transition on margin

1 Answers