Tailwind height transition not working on h-min, h-fit, h-max, and h-auto

Question

So I like to make transition whenever the element change it's height. It works on h-10, h-20, etc. But it doesnt work on h-min, h-max, h-auto. ‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎

<div id="botnav" className={`${isOpen ? 'h-min' : 'h-0'}
                bg-primary
                flex flex-col
                transition-all duration-500 ease
                
        `}>
            {
                menu.map((item, index) => {
                    return (
                        <Link href={item.link} key={index} className="">
                            <a className=" w-full px-1 py-1 text-white font-bold items-center justify-center border-none ">
                                {item.name}
                            </a>
                        </Link>
                    )
                })
            }

        </div>

tailwind.config.js

module.exports = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx}",
    "./src/pages/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#6558F5',
        },
        secondary: '#FED103',
        container: {
          100: '#E0E0E0',
          200: '#C4C4C4'
        }
      },

      gridTemplateColumns: {
        title: '0.1fr 0.9fr'
      },
      transitionProperty: {
        'height': 'height',
      }
    }
  },
  variants: {
    extend: {}
  },
}
```‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎  ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ 

Answer 1

It's not just a Tailwind issue. CSS only supports height transitions from one numeric value to another, not values like height: auto. You can sometimes solve this issue by transitioning the max-height value between an arbitrarily large value (the tallest your element can be) and zero. For example:

<div id="botnav" className={`${isOpen ? 'max-h-40' : 'max-h-0'} transition-all duration-500 ease`}>

Answer 2

You could use CSS instead if Tailwind wasn't cooperating

<div 
  id="botnav"
  style={ isOpen
    ? { maxHeight: "10rem", transition: "max-height 0.15s ease-out"}
    : { maxHeight: "0rem",  transition: "max-height 0.15s ease-in"}
}>

see How can I transition height: 0; to height: auto; using CSS?

Answer 3

You can transition max-height but not height using CSS. You could use headless-ui Transition element (which is created by Tailwind)

    import { Transition } from '@headlessui/react';

    <Transition
        show={isOpen}
        className="transition-all duration-500 overflow-hidden"
        enterFrom="transform max-h-0"
        enterTo="transform max-h-[9999px]"
        leaveFrom="transform max-h-[9999px]"
        leaveTo="transform max-h-0"
    >
        <div id="botnav">
            <Link href={item.link} key={index} className="">
                 <a className=" w-full px-1 py-1 text-white font-bold items-center justify-center border-none ">
                      {item.name}
                 </a>
            </Link>
        </div>
    </Transition>