CSS transform based on conditional class changes not working when using vuejs and tailwind

Question

I'm trying to use the tailwind transition class to expand the sidebar< ;/code> Submenu component.

// 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>

The expected behavior is that when 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] }

If 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.

Finally, if I replace h-[${link.sublinks.length * 45}px] with a constant value (e.g. h-[200px]< /code>) everything works as expected.

I suspect h-auto is overriding my height custom class.

I'm Latin, so my English isn't very good.

Thanks in advance.

Answer 1

I've made it work, but I don't like the solution I found:

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

Just avoid using the Tailwind class to define the height attribute, that's it for now.