In diesem Artikel wird das Verfahren zum Steuern der Schriftfamilie eines Elements mithilfe der Tailwind-Dienstprogramme beschrieben.
Wie steuere ich die Schriftfamilie eines Elements mithilfe der Tailwind-Dienstprogramme?
Um eine Schriftfamilie eines Elements in Tailwind zu steuern, muss das folgende Dienstprogramm für das Element bereitgestellt werden:
Schriftart- { Schriftfamilie }
Es gibt drei Standardschriftfamilien, die mit dem oben bereitgestellten Dienstprogramm festgelegt werden können. Diese beinhalten ' Serife ',' ohne ', Und ' Mono “.
Lassen Sie uns diese Schriftfamilien in einer Demonstration mit dem „ Schriftart-{Schriftfamilie} ”-Klasse, um zu sehen, wie es funktioniert:
< div Klasse = „Font-Serif Rounded-XL Shadow-LG Text-Center Py-2 My-2 BG-Green-100“ >
Dies ist eine FONT-SERIF-Familie
< / div >
< div Klasse = „font-sans Rounded-XL Shadow-LG Text-Center Py-2 My-2 BG-Blue-100“ >
Dies ist eine FONT-SANS-Familie
< / div >
< div Klasse = „Font-Mono Rounded-XL Shadow-LG Text-Center Py-2 My-2 BG-Red-100“ >
Dies ist eine FONT-MONO-Familie
< / div >
Die Erklärung für den obigen Code lautet wie folgt:
- Es gibt drei div-Elemente, die mit „ ” und sind mit verschiedenen Schriftfamilien versehen.
- Der ' Schriftfamilie} Die Klasse stellt die angegebene Schriftfamilie für den Text im Element bereit.
- Der ' abgerundet-xl Die Klasse „rundet“ die Ecken des div-Elements ab.
- Der ' Schatten-lg Die Klasse „gibt dem div-Element einen großen Schatten.“
- Der ' Text-Center ” richtet den Text in der Mitte des Elements aus.
- Der ' py-2 ' Und ' mein-2 „Die Kurse bieten“ 8px ” Polsterung und Rand in der oberen und unteren Richtung des Elements.
- Der ' bg-{color}-{number} Die Klasse „ist dafür verantwortlich, den Hintergrund des Elements auf die angegebene Farbe festzulegen.
Aus der Ausgabe geht hervor, dass jedes Element eine andere Schriftfamilie hat:
Mit der Hover-Funktion können wir die Schriftfamilie eines Elements auch dynamisch ändern. Gehen Sie zur Veranschaulichung den folgenden Code durch:
< div Klasse = „my-2 Rounded-XL BG-Slate-100 Py-2 Text-Center Font-Mono Shadow-LG Hover:Font-Serif“ >Dies ist standardmäßig eine FONT-MONO-Familie< / div >Im oben bereitgestellten Code lautet „ Hover: Schriftart-{Familie} Das Dienstprogramm ist dafür verantwortlich, die Schriftfamilie des Elements zu ändern, sobald der Mauszeiger darüber schwebt. In der Ausgabe ist zu erkennen, dass sich die Schriftfamilie des Textes ändert, wenn der Benutzer mit der Maus darüber fährt:
Dabei geht es darum, die Schriftfamilie eines Elements in Tailwind zu steuern.
Abschluss
In Tailwind kann einem Element eine Schriftfamilie zugewiesen werden, indem man „ Schriftfamilie} ' Klasse. Es gibt drei Standardschriftfamilien, die von Tailwind bereitgestellt werden, nämlich „ ohne ',' Serife ', Und ' Mono “. Der Benutzer kann auch die Schriftfamilie eines Elements ändern, wenn sich der Status eines Elements ändert. In diesem Artikel wird das Verfahren zum Steuern der Schriftfamilie eines Elements in Tailwind beschrieben.