Как создать конфигурацию в Tailwind CSS V4 ⇐ CSS

[Anonymous]

контекст < /h3>
Я пытаюсь создать пользовательскую анимацию в Tailwind CSS V4. Я застрял, потому что файл tailwind.config.js < /code> устарел от этой версии Tailwind, и я не узнаю альтернативы.

Например, я хочу пользовательский Анимация и я нашли в Интернете эта анимация в формате JS: < /p>

Код: Выделить всё

tailwind.config = {
theme: {
extend: {
keyframes: {
typing: {
"0%": {
width: "0%",
visibility: "hidden"
},
"100%": {
width: "100%"
}
},
blink: {
"50%": {
borderColor: "transparent"
},
"100%": {
borderColor: "white"
}
}
},
animation: {
typing: "typing 2s steps(20) infinite alternate, blink .7s infinite"
}
},
},
plugins: [],
}
< /code>
 Вопрос < /h3>
Как я могу получить тот же результат в Tailwind V4? Я не понимаю общего правила для перевода файлов конфигурации JS в синтаксис TailInd V4. Force Tailwind v4 для использования Tailwind.config.js 

, но это устаревший подход, который исключает также некоторую функциональность. Поскольку я строю сайт с нуля, я не думаю, что должен принять устаревшие операции. JS Config to Tailwind V4 config. Например, в этом ответе объясняется только то, как добиться перевода только этого фрагмента кода, но этого недостаточно для того, что я стремлюсь получить. v4 Файл, который я нашел в Интернете, Глядя на этот ответ: < /p>

Код: Выделить всё

@utility keyframes {
@variant typing {

}
}

@utility animation {
@variant typing {

}
}
< /code>
Но я все еще застрял, потому что я не знаю, как перевести некоторые срезы файлов JS, такие ">// ...
typing: {
"0%": // ...

in tailwind v4 syntax.


Подробнее здесь: https://stackoverflow.com/questions/794 ... ind-css-v4