CODEWITHSUNDEEP
javascriptcssreactjsjsxtailwind-css
CleverOscar
CleverOscar

Reputation: 135

Tailwind Height Transition

I am trying to create a transition effect with TailwindCSS and have not come across an updated version with the latest packets.

here is my code

 <div id="fadeInElement" className={visible ? " w-2/3 px-5 transition-height duration-500 ease-in-out h-full" : " hidden h-0"} >
     McClintock, a Latin professor at Hampden-Sydney College in.....
 </div>

I added the height property to my tailwindcss config file to allow me to use the height property but it still does not seem to create the animation. It displays and hides only.

Upvotes: 1

Views: 1948

Answers (1)

Dhanush
Dhanush

Reputation: 41

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

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

Upvotes: 4

Related Questions