使用Tailwind CSS时手风琴展开后立即闭合的问题修复

问题场景 #

我使用Tailwind CSS实现了Bootstrap手风琴组件，代码如下：

<div class="accordion-item mb-5 overflow-hidden rounded-lg border border-jacarta-100 dark:border-jacarta-600">
    <h2 class="accordion-header" id="faq-heading-1">
        <button class="accordion-button relative flex w-full items-center justify-between bg-white px-4 py-3 text-left font-display text-jacarta-700 dark:bg-jacarta-700 dark:text-white" type="button" data-bs-toggle="collapse" data-bs-target="#faq-1" aria-expanded="false" aria-controls="faq-1">
            <span>What is tax and legal advisory?</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="accordion-arrow h-4 w-4 shrink-0 fill-jacarta-700 transition-transform dark:fill-white">
            <path fill="none" d="M0 0h24v24H0z"></path>
            <path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"></path>
            </svg>
        </button>
    </h2>
    <div id="faq-1" class="accordion-collapse" aria-labelledby="faq-heading-1" data-bs-parent="#accordionFAQ">
        <div class="accordion-body border-t border-jacarta-100 bg-white p-4 dark:border-jacarta-600 dark:bg-jacarta-700">
            <p class="dark:text-jacarta-200">Learn how to create your very first NFT and how to create your NFT collections. Unique.
            </p>
        </div>
    </div>
</div>

点击手风琴按钮后，面板展开后会立即闭合；预期效果是面板保持展开状态。通过浏览器调试发现，取消容器上的overflow: hidden属性可实现预期效果，同时切换手风琴时collapse类被重复添加，且CSS同时存在于样式表和内联中（我仅使用了一个独立样式文件）。

修复步骤 #

• 移除冲突的overflow属性：直接删除手风琴容器上的overflow-hidden类，Bootstrap的collapse组件需要自行控制元素的overflow状态，手动添加的该属性会打断其动画与展开逻辑。
• 排查重复CSS来源：
  • 检查项目中是否重复引入了Bootstrap CSS文件，或Tailwind配置中是否意外集成了Bootstrap样式规则
  • 通过浏览器调试工具追踪内联CSS的添加来源，确认是否有第三方脚本/插件动态注入样式
  • 核对Tailwind自定义工具类，避免重复定义与Bootstrap collapse相关的样式
• 修正手风琴核心配置：
  • 确保折叠面板初始添加collapse类，展开状态通过show类控制
  • 确认data-bs-parent属性指向的手风琴容器ID在页面中真实存在（当前代码中为#accordionFAQ）

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