主页 / coding / 问题 / 79570343
Accepted
rozsazoltan
Asked: 2025-04-12 18:48:32 +0800 CST

@utility 用于创建修改预声明动画的重复计数

  • 772

我想声明一个@utility名为 的函数animate-repeat-{number}，它的作用是在使用时修改一个变量；这个变量我把它绑定到所有动画的重复次数上。这样就成功了。

@utility animate-repeat-* {
  --animate-repeat-count: --value(integer);
}

@utility animate-repeat-infinite {
  --animate-repeat-count: infinite;
}

@theme但是，当我在（或者如果它默认存在，如 animate-bounce）中声明动画时，.animate-bounce { ... }该类通过变量接收动画：

.animate-bounce {
  animation: var(--animate-bounce);
}

这里的问题是，即使我覆盖了的值--animate-bounce，DevTools（F12）仍然将其突出显示为bounce 1s infinite而不是bounce 1s var(--animate-repeat-count, infinite)。

不起作用的示例@theme
不起作用的示例 TailwindCSS v4 Playground（带有@theme）
弹跳 1 秒无限 --animate-repeat-count 未定义

如果我在 中声明动画@utility，问题在于默认动画@theme会优先。用 !important 覆盖它就可以了。

自然，没有了!important，theme层就更强，我无法覆盖它；这就是它能与一起工作的原因!important。

不工作 与……合作important
无效示例 TailwindCSS v4 Playground（无重要信息） 成功示例 TailwindCSS v4 Playground（重要）
无效示例 TailwindCSS v4 Playground（无重要信息） 成功示例 TailwindCSS v4 Playground（重要） 

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@utility animate-bounce {
  animation: bounce 1s var(--animate-repeat-count, infinite) !important;
}

@utility animate-repeat-* {
  --animate-repeat-count: --value(integer);
}

@utility animate-repeat-infinite {
  --animate-repeat-count: infinite;
}
</style>

<div class="p-10 text-center">
  <button class="mx-auto animate-bounce bg-green-300 px-8 py-2 animate-repeat-2">
    Bounce animation repeated 2 times in 1s.<br>(It only works with !important because utilities are weaker than the theme layer.)
  </button>
</div>

如何才能使在默认情况下正确声明的动画@theme工作，而无需使用!important？我希望以下代码的工作方式与三个共享游乐场中的最后一段代码相同：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  --animate-bounce: bounce 1s var(--animate-repeat-count, infinite);
}

@utility animate-repeat-* {
  --animate-repeat-count: --value(integer);
}

@utility animate-repeat-infinite {
  --animate-repeat-count: infinite;
}
</style>

<div class="p-10 text-center">
  <button class="mx-auto animate-bounce bg-green-300 px-8 py-2 animate-repeat-2">
    Bounce animation repeated 2 times in 1s. (Not working)
  </button>
</div>

tailwind-css

1 个回答

  1. Best Answer

    您可以考虑使用@theme inline。这确保--animate-repeat-count从animate-bounce使用类名的元素解析。

    <script src="https://unpkg.com/@tailwindcss/[email protected]"></script>

<style type="text/tailwindcss">
@theme inline {
  --animate-bounce: bounce 1s var(--animate-repeat-count, infinite);
}

@utility animate-repeat-* {
  --animate-repeat-count: --value(integer);
}

@utility animate-repeat-infinite {
  --animate-repeat-count: infinite;
}

</style>

<div class="p-10 text-center">
  <button class="mx-auto animate-bounce bg-green-300 px-8 py-2 animate-repeat-2">Bounce animation repeated 2 times in 1s.</button>
</div>

    • 1

相关问题