So erstellen Sie Konfiguration in Rückenwind CSS V4 ⇐ CSS

[Anonymous]

Kontext < /h3>
Ich versuche, benutzerdefinierte Animation in den Rückenwind -CSS V4 zu erstellen. Ich stecke fest, weil die Datei tailwind.config.js < /code> durch diese Rückenwindversion veraltet ist und ich keine Alternative ermittelte. Animation und ich fanden diese Animation im JS-Format online: < /p>

Code: Select all

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>
 Frage < /h3>
Wie kann ich das gleiche Ergebnis in Rückenwind v4 erhalten? Ich verstehe die allgemeine Regel nicht, um JS -Konfigurationsdateien in die Tailwind V4 -Syntax zu übersetzen. Erzwingen Sie Tailwind V4, um Tailwind.config.js 

zu verwenden, aber es ist ein älterer Ansatz, der auch einige Funktionen ausschließt. Da ich eine Website von Grund auf neu erstelle, denke ich nicht, dass ich veraltete Operationen annehmen muss. JS -Konfiguration zu Tailwind v4 config. Zum Beispiel wird in dieser Antwort nur erklärt v4 Die Datei, die ich online gefunden habe, betrachtete diese Antwort: < /p>

Code: Select all

@utility keyframes {
@variant typing {

}
}

@utility animation {
@variant typing {

}
}
< /code>
Aber ich steckte immer noch fest, weil ich nicht weiß, wie man einige JS-Dateischeiben wie folgt übersetzen: < /p>
// ...
typing: {
"0%": // ...

in die Tailwind -V4 -Syntax.