CODEWITHSUNDEEP
reactjstailwind-css
Maxime Ghéraille
Maxime Ghéraille

Reputation: 1895

animate height property tailwindcss

Is there a way to animate the height property, this my simple code but the height isn't animated it just changed instantly

<div>
<a className="group  flex items-center w-full pr-4 pb-2 text-gray-600 transition-transform transform rounded-md hover:translate-x-1 focus:outline-none focus:ring collapsed" onClick={() => { setSecond(!secondElement) }}>
  <span className="ml-1 text-white text-xl group"> TITLE </span>
 </a>
</div>
<div className={`transition-all duration-300 ease-in-out transform ${!secondElement ? 'h-0' : 'h-auto'} bg-blue mt-2 space-y-2 px-7`}>
 <a
    role="menuitem"
    className="block p-2 text-sm text-white transition-colors duration-200 rounded-md dark:text-light dark:hover:text-light hover:text-gray-700">1</a>
 <a
  role="menuitem"
  className="block p-2 text-sm text-white transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700">2</a>
   </div>
</div>

Upvotes: 9

Views: 11998

Answers (1)

juliomalves
juliomalves

Reputation: 50228

By default, Tailwind does not provide transition-property utilities for the height property. You'll need to add it to your tailwind.config.js file for the transition to work.

module.exports = {
    theme: {
        extend: {
            transitionProperty: {
                height: 'height'
            }
        }
    }
}

From Tailwind v3, you can now use an arbitrary value to generate a one-off transition-property on the fly, without changing your tailwind.config.js file.

<div class="transition-[height]">
    <!-- ... -->
</div>

Upvotes: 11

Related Questions