Vue.js+Tailwind条件类过渡动画失效问题求助

问题场景 #

在Vue.js侧边栏组件中，尝试用Tailwind的transition类实现<router-link>子菜单的展开/收起过渡效果，核心代码及异常现象如下：

模板代码 #

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

// 问题所在行
<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>

自定义Tailwind类 #

.sidebar-dropdown-menu { @apply w-full overflow-hidden transition-[height] duration-[300ms] }

异常现象 #

子菜单能正常显示/隐藏，但过渡动画完全失效；Chrome开发者工具显示动态计算的height: 135px样式被划掉（禁用状态）。若将动态高度改为固定值（如h-[200px]），过渡动画则正常工作。

解决方案 #

问题根源在于Tailwind无法识别运行时动态生成的类名：通过link.sublinks.length * 45计算出的高度类（如h-[135px]）是动态生成的，Tailwind编译时的扫描工具不会将这类类纳入样式生成范围，导致该样式不存在，最终被其他默认样式（如h-auto）覆盖。

修改方法：用内联样式绑定高度 #

将动态高度类替换为Vue内联样式绑定，直接设置height属性，确保样式优先级足够且能被正确识别：

// 修改后的子菜单容器
<div 
    :style="{ height: link.open ? `${link.sublinks.length * 45}px` : '0' }"
    class="sidebar-dropdown-menu"
>
    <!-- 子菜单router-link内容保持不变 -->
</div>

原理说明 #

• 内联样式优先级高于类样式，能确保height值不会被其他样式覆盖；
• Tailwind的transition-[height]会监听height属性变化，触发平滑过渡动画；
• 运行时计算的高度值通过内联样式直接作用于元素，无需依赖Tailwind编译生成类。

修改后，切换link.open状态时，子菜单会以300ms时长平滑展开/收起，动画正常生效。

内容的提问来源于stack exchange，提问作者fahico98