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?

zafer onay · Accepted Answer · 2020-12-09 17:13:47Z

4

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

answered Dec 9, 2020 at 17:13

zafer onay

1,81012 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React + Tailwind CSS: Transition on margin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related