Tailwind自定义工具类orangefilter搭配duration-300不生效求助

问题出在你只设置了过渡时长（duration-300），但没有指定要过渡的属性为filter——Tailwind默认的过渡属性集合里不包含filter，所以浏览器不知道要对这个属性的变化应用过渡动画。

以下是两种可行的解决方案：

方案一：使用transition-all快速解决 #

直接给图片元素添加transition-all类，它会对所有可过渡的属性（包括filter）应用动画：

<li class="flex justify-center items-center group hover:text-orange-400 duration-300 ">
    <img class="w-4 h-4 mr-2 contrast-50 group-hover:orangefilter transition-all duration-300" src="./icons/user.png">
    <p>Account</p>
</li>

方案二：自定义精准的过渡工具类（推荐） #

如果不想过渡所有属性，只针对filter做动画，可以自定义一个过渡工具类，更符合性能优化的原则：
在你的input.css中添加：

@layer utilities {
    .orangefilter {
        filter: invert(55%) sepia(29%) saturate(5825%) hue-rotate(352deg) brightness(102%) contrast(90%);
    }
    /* 新增针对filter的过渡类 */
    .transition-filter {
        transition-property: filter;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
}

然后修改HTML中的图片类：

<img class="w-4 h-4 mr-2 contrast-50 group-hover:orangefilter transition-filter duration-300" src="./icons/user.png">

补充说明 #

• 你的初始状态（contrast-50）和hover状态（orangefilter）都使用了filter属性，状态变化是有效的，只要指定正确的过渡属性就能触发动画；
• 不需要把duration-300加到group-hover类里，过渡属性应该设置在元素本身，而非hover状态的类上。

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