Início / coding / Perguntas / 79570343
Accepted
rozsazoltan
Asked: 2025-04-12 18:48:32 +0800 CST

@utility para criar e modificar a contagem de repetições de animações pré-declaradas

  • 772

Eu queria declarar um @utilitychamado animate-repeat-{number}, cuja função é modificar uma variável no momento do uso; uma variável que vinculo à contagem de repetições em todas as minhas animações. Isso funciona.

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

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

Entretanto, quando declaro a animação em @theme(ou se ela existe por padrão, como animate-bounce), a .animate-bounce { ... }classe recebe a animação por meio de uma variável:

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

O problema aqui é que, mesmo que eu substitua o valor de --animate-bounce, o DevTools (F12) ainda o destaca como bounce 1s infiniteem vez de bounce 1s var(--animate-repeat-count, infinite).

Exemplo não funcional com@theme
Exemplo não funcional TailwindCSS v4 Playground (com @theme)
salto 1s infinito --animate-repeat-count não está definido

Se eu declarar a animação em @utility, o problema é que a animação padrão de @themetem precedência. Sobrescrevê-la com !important funciona bem.

Naturalmente, sem !important, a themecamada é mais forte e não consigo substituí-la; é por isso que funciona com !important.

Não está funcionando Trabalhando comimportant
Exemplo não funcional TailwindCSS v4 Playground (sem importância) Exemplo bem-sucedido do TailwindCSS v4 Playground (com importantes)
Exemplo não funcional TailwindCSS v4 Playground (sem importância) Exemplo bem-sucedido do TailwindCSS v4 Playground (com importantes) 

<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>

Como posso fazer com que a animação declarada @themefuncione corretamente por padrão, sem precisar usar !important? Espero que o código a seguir funcione da mesma forma que o anterior, dos três playgrounds compartilhados :

<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 respostas

  1. Best Answer

    Você pode considerar usar @theme inline. Isso garante que o --animate-repeat-countseja resolvido a partir do elemento onde o animate-bouncenome da classe é usado.

    <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

relate perguntas