'Tailwind height transition not working on h-min, h-fit, h-max, and h-auto
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: {}
},
}
```
Solution 1:[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`}>
Solution 2:[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?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Ed Lucas |
| Solution 2 | HyperActive |