FlyonUI（TailwindCSS）collapse-open:rotate-180不生效问题求助

我在使用FlyonUI的Collapse组件时遇到了图标旋转动画无法生效的问题，使用的代码如下：

<button type="button" class="collapse-toggle btn btn-primary" id="shadow-collapse" aria-expanded="false" aria-controls="shadow-collapse-heading" data-collapse="#shadow-collapse-heading" >
    Collapse
    <span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4"></span>
</button>

<div id="shadow-collapse-heading" class="collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="shadow-collapse" >
    <div class="bg-primary/20 mt-3 rounded-md p-3">
        <p class="text-primary">
            The collapsible body remains concealed by default until the collapse plugin dynamically adds specific classes.
            These classes are instrumental in styling each element, dictating the overall appearance, and managing visibility
            through CSS transitions.
        </p>
    </div>
</div>

当前技术栈为Laravel 11、Tailwind v4、FlyonUI v2及SASS。

排查与解决步骤 #

1. 添加变换过渡属性
   图标旋转动画需要transition-transform实现平滑效果，当前代码未包含该类，修改图标元素：

<span class="icon-[tabler--chevron-down] collapse-open:rotate-180 size-4 transition-transform duration-300"></span>

2. 确认Tailwind v4变体配置
   Tailwind v4对自定义变体的处理逻辑有调整，需确保FlyonUI的collapse-open变体已正确注册到Tailwind配置中。修改tailwind.config.js：

export default {
  plugins: [
    require('flyonui/plugin'),
  ],
  variants: {
    extend: {
      rotate: ['collapse-open'],
      transitionProperty: ['collapse-open'],
    },
  },
}

3. 检查插件添加的类名
   通过浏览器开发者工具点击按钮后，查看触发按钮是否被添加了collapse-open类：

• 如果类未添加，确认FlyonUI Collapse组件已正确初始化：

  // 在app.js中导入并初始化
  import { Collapse } from 'flyonui';
  Collapse.init();
  

• 如果类添加在按钮上，而图标是子元素，需调整变体为父元素状态触发（Tailwind v4中使用group-*变体）：

  <button type="button" class="collapse-toggle btn btn-primary group" id="shadow-collapse" aria-expanded="false" aria-controls="shadow-collapse-heading" data-collapse="#shadow-collapse-heading" >
      Collapse
      <span class="icon-[tabler--chevron-down] group-collapse-open:rotate-180 size-4 transition-transform duration-300"></span>
  </button>
  

  注：需确认FlyonUI实际添加的父元素类名，若为open则使用group-open:rotate-180。

4. 验证SASS编译正确性
   确保SASS文件中正确引入Tailwind指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

重新编译CSS，确认自定义变体样式被正确生成。

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