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.

Answer 1

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