Tailwind CSS 突然出现透明度过渡失效问题求助

我有一个包含两个子元素的父div，鼠标悬停时会设置状态并改变透明度，使带有数字的div淡出，同时显示一个React图标。该功能昨晚正常运行，但今天打开VSCode后突然失效。

相关代码：

<div className={`group w-full flex justify-between box-border items-center rounded-lg hover:bg-[#4c426e] cursor-pointer self-stretch min-w-0 h-[50px] p-0 mb-2 relative`} 
    onMouseEnter={() => setHovered(true)}
    onMouseLeave={() => setHovered(false)}>
    <div className={`w-full text-[12px] min-w-[35px] max-w-[35px] text-left ml-2 self-center shrink text-lg text-[#989898] relative`}>
        <div className={`absolute top-0 left-0 w-full h-full flex items-center justify-center transition-all ease-in-out duration-300`}>
            <span className={`absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-${hovered ? '0' : '100'} transition-all ease-in-out duration-300`} >
                {number}
            </span>
            {hovered && <span className={`absolute bottom-0 left-0 w-full h-full flex items-center justify-center opacity-${hovered ? '100' : '0'} transition-all ease-in-out duration-300`} >
                <FaPlay onClick={() => handlePlay(title, artist)}/>
            </span>}
        </div>
    </div>
</div>

请问有人能找出问题所在吗？还是我的Tailwind安装出现异常？

核心问题是动态拼接的Tailwind类未被编译器识别：
你用模板字符串拼接opacity-${hovered ? '0' : '100'}这种写法，Tailwind的JIT编译器无法提前识别这些动态生成的类名，昨天可能依赖缓存还能生效，今天重启VSCode或重新构建后缓存失效，对应的CSS规则没被生成，导致透明度切换失效。

直接用两种方法解决：

1. 直接条件切换完整类名（推荐）
   把数字和图标元素的类名改成明确的条件判断，让Tailwind能识别到用到的类：

// 数字span的类名
className={`absolute top-0 left-0 w-full h-full flex items-center justify-center transition-all ease-in-out duration-300 ${hovered ? 'opacity-0' : 'opacity-100'}`}

// 播放图标span的类名
className={`absolute bottom-0 left-0 w-full h-full flex items-center justify-center transition-all ease-in-out duration-300 ${hovered ? 'opacity-100' : 'opacity-0'}`}

2. 添加安全列表强制生成类
   如果一定要保留动态拼接写法，可在tailwind.config.js中把用到的透明度类加入安全列表，强制编译器生成对应的CSS：

module.exports = {
  safelist: [
    'opacity-0',
    'opacity-100',
  ],
  // 其他配置项...
}

另外可以快速检查下Tailwind配置文件，确认JIT模式是否开启（Tailwind v3默认开启），如果配置无变动，基本就是动态类未被识别的问题。

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