I'm trying to use the tailwind transition class to expand the sidebar
// template// This is the funny line...{{ link.label }} {{ sublink.label }}
The expected behavior is that when If Finally, if I replace I suspect I'm Latin, so my English isn't very good. Thanks in advance. link.open becomes true, the defined in the interesting line< tag/strong> expands (or displays) with a 300 millisecond transition, its
height value has been adjusted based on link.sublinks.length Value definitions, all of which apply the sidebar-dropdown-menu CSS class. What I mean is: .sidebar-dropdown-menu { @apply w-full overflow-hidden transition-[height] duration-[300ms] } link.sublinks.length is equal to 3, then the custom class applied will be h-[135px] ; and the tag in
funny line appears, but although the p-0 class works as expected, the conversion doesn't work. Google Chrome Dev Tools shows me height: 135px as a disabled CSS rule. h-[${link.sublinks.length * 45}px] with a constant value (e.g. h-[200px]< /code>) everything works as expected. h-auto is overriding my height custom class.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I've made it work, but I don't like the solution I found: