Tailwind height transition inside a modal

Question

I have a modal (written in React but that doesn't matter) and inside, I'm trying to add an accordion. I have the accordion sliding up and down nicely, my issue is that the height of the modal jumps up and down instantly based on the accordion transition.

Is there a way I can make the modal height grow in a transition along side the accordion? Thanks

Edit: Rephrase question.

Solution

Add the following lines to your tailwind.config.js file and rebuild your CSS static files:

---

theme: {
    extend: {
      transitionProperty: {
        'height': 'height'
      }
    }
  }

---

Now you should be able to use height as a transition property:

transition-height duration-500 ease-in-out

If you want to simply test the animation, let's say on hovering over the accordion you can also add the following to the config file:

---

variants: {
    height: ['responsive', 'hover', 'focus']
}

---

if you now use the following classes on any div the animation should work smoothley:

bg-green-500 transition-height duration-500 ease-in-out h-8 hover:h-20

Cheers Alan

Tailwind docs: https://tailwindcss.com/docs/transition-property#app

Comments

[Kurtis]

Thanks for responding and sorry for the very slow response, I've been off. My issues isnt that I cant get animations working. The accordion works and the modal transition (fade in when opening) works. The issue it the accordion inside a modal. The modal height jumps instantly and the accordion slides open. Do you know how to make the modal height grow in a transition? Thanks

[J. Adam Connor]

Since I found this answer while looking for a way to simply apply a transition to height, it might be worth it to edit your post to reflect that this can be done by simply using transition-all, though it does not answer the OP's question.