So erstellen Sie Konfiguration in Rückenwind CSS V4
Posted: 21 Feb 2025, 23:12
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> 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>
in die Tailwind -V4 -Syntax.
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 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%": // ...