我正在使用angular 14.1和tailwindCSS 3.2.4构建一个网站。现在请考虑以下CSS

*, ::after, ::before{
  transition: background-color 0.3s, color 0.3s;
  transition-timing-function: ease-in-out;
  transition-delay: 0ms;
}

.text-color{
  @apply text-neutral-900 dark:text-slate-50;
}
.text-color-hover{
  @apply hover:text-[#F1C203] dark:hover:text-[#F1C203];
}

它为我网站上的任何元素设置过渡属性，并且使用text-color和text-color-hover，我只是定义了表示亮/暗模式和悬停状态的颜色的类。
现在考虑以下HTML

<div class="text-color text-color-hover font-normal mb-2 cursor-pointer">
  <span class="text-5xl">Films</span>
  <span class="text-5xl">>></span>
</div>

现在发生的情况是，我悬停其中一个span标记，两个span标记都会改变颜色。一切都很好。然而，在颜色过渡中存在延迟，其正好与css中定义的过渡持续时间一样长。显然这不是故意的。那么，如何消除这种延迟呢？