<p>I'm trying to use the <strong>tailwind</strong> <code>transition</code> class to expand the sidebar<strong><code><router-link>< ;/code> Submenu</strong> component. </p> <pre class="brush:php;toolbar:false;">// template <div :class="`${index === 0 ? 'mt-2' : ''} sidebar-link sidebar-dropdown-link`" @click="link.open = !link.open" > <div class="flex items-center"> <FontAwesomeIcon :icon="link.icon" class="sidebar-link-icon" /> {{ link.label }} </div> <FontAwesomeIcon :icon="link.open ? ['fas', 'chevron-up'] : ['fas', 'chevron-down']" class="sidebar-dropdown-link-icon" /> </div> // This is the funny line... <div :class="`${link.open ? `h-[${link.sublinks.length * 45}px]` : 'h-0'} sidebar-dropdown-menu`"> <router-link v-for="(sublink, index) in link.sublinks" :key="index" class="sidebar-link mt-1" :to="sublink.route" > <FontAwesomeIcon :icon="sublink.icon" class="sidebar-link-icon pl-3" /> {{ sublink.label }} </router-link> </div></pre> <p>The expected behavior is that when <code>link.open</code> becomes <code>true</code>, the <code> defined in the <strong>interesting line< <div></code>tag/strong> expands (or displays) with a 300 millisecond transition, its <code>height</code> value has been adjusted based on <code>link.sublinks.length</code> Value definitions, all of which apply the <code> sidebar-dropdown-menu</code> CSS class. What I mean is: </p> <pre class="brush:php;toolbar:false;">.sidebar-dropdown-menu { @apply w-full overflow-hidden transition-[height] duration-[300ms] }</pre> <p>If <code>link.sublinks.length</code> is equal to <code>3</code>, then the custom class applied will be <code>h-[135px]</code> ; and the <div></code> tag in <code> <strong>funny line</strong> appears, but although the <code>p-0</code> class works as expected, the conversion doesn't work. Google Chrome Dev Tools shows me <code>height: 135px</code> as a disabled CSS rule. </p> <p>Finally, if I replace <code>h-[${link.sublinks.length * 45}px]</code> with a constant value (e.g. <code>h-[200px]< /code>) everything works as expected. </p> <p>I suspect <code>h-auto</code> is overriding my height custom class. </p> <p>I'm Latin, so my English isn't very good. </p> <p>Thanks in advance. </p>

<div
    :style="`${link.open ? `height: ${link.sublinks.length * 45}px` : 'height: 0px'}`"
    class="sidebar-dropdown-menu"
>