Dieser Artikel bietet eine Anleitung zum Gestalten des Texts in Tailwind anhand der folgenden Gliederung:
- Verwenden Sie die Textausrichtungsklasse
- Verleihen Sie Textinhalten Farben
- Verwenden Sie verschiedene Schriftfamilien
- Versehen Sie den Text mit Unterstreichungsverzierungen
- Fügen Sie dem Text Einzüge hinzu
Wie verwende ich die Textausrichtungsklasse in Tailwind?
Bei der Gestaltung des Textinhalts ist die Positionierung des Textes ebenso wichtig wie die Dekoration. Wenn der Text nicht richtig ausgerichtet ist, sieht das gesamte Design der Webseite seltsam aus. Um Text in Tailwind auszurichten, wird die folgende Klasse verwendet:
Text- { Ausrichtung }
Zu den Ausrichtungsoptionen gehören „ Center ',' links ',' Rechts ', Und ' rechtfertigen “. Lassen Sie uns jede dieser Ausrichtungen anhand der folgenden Demonstration verstehen:
< P Klasse = „text-center bg-slate-200“ > Dies ist ein Beispieltext, der mit der Ausrichtung TEXT CENTER versehen ist. < / P >
< br >
< P Klasse = „text-right bg-slate-200“ > Dies ist ein Beispieltext, der mit der Ausrichtung TEXT RECHTS versehen ist. < / P >
< br >
< P Klasse = „text-left bg-slate-200“ > Dies ist ein Beispieltext, der mit der Ausrichtung TEXT LINKS versehen ist. < / P >
< br >
< P Klasse = „text-justify bg-slate-200“ > Dies ist ein Beispieltext, der mit der Ausrichtung TEXT JUSTIFY versehen ist. < / P >
Die Erklärung des obigen Codes lautet wie folgt:
- Vier“ P „Elemente werden erstellt und durch einen Zeilenumbruch getrennt.
- Der Text der vier p-Elemente wird mithilfe des „“ an einer bestimmten Position ausgerichtet. Textausrichtung} ' Klasse.
- Der ' bg-{color}-{number} Die Klasse „stellt die Hintergrundfarbe für jedes“ bereit. P ' Element.
Ausgabe
In der folgenden Ausgabe ist zu sehen, wie sich jede der Ausrichtungsklassen auf die Textposition auswirkt. Sie können sehen, dass der Text des ersten Elements zentriert ausgerichtet ist, der des zweiten Elements rechts, des dritten Elements links ausgerichtet ist und das vierte Element den Text im Blocksatz anzeigt:
Wie kann man Textinhalten in Tailwind Farbe verleihen?
Farbe spielt eine wichtige Rolle bei der Gestaltung des Textinhalts eines Elements. Wenn keine geeignete Farbe ausgewählt wird, kann der Text schwer lesbar werden. Dies wird sich negativ auf die Gestaltung des Layouts auswirken. Um die Farbe eines Textes in Tailwind festzulegen, verwenden Sie die unten angegebene Klasse:
Text- { Farbe } - { Nummer }In der oben definierten Syntax muss der Benutzer den Namen der Farbe gefolgt von einer Zahl angeben, die für den Farbton der angegebenen Farbe verantwortlich ist.
Die unten bereitgestellte Demonstration hat drei „ P ”Elemente, die mit verschiedenen Textfarbklassen gestaltet sind:
< P Klasse = „text-violet-500 text-center“ > Dies ist ein violetter Text < / P >< P Klasse = „text-red-500 text-center“ > Dies ist ein rot gefärbter Text < / P >
< P Klasse = „text-green-500 text-center“ > Dies ist ein grün gefärbter Text < / P >
Die im obigen Code verwendeten Klassen sind wie folgt:
- Der erste ' P „Element wird mit einer violetten Farbe versehen, indem man das „“ verwendet. text-{color}-{number} ' Klasse.
- Das zweite und dritte „ P „Elemente werden auf die gleiche Weise mit den Farben Rot und Grün versehen.
- Der ' Text-Center Die Klasse „Positioniert den Textinhalt in der Mitte des Elements.
Ausgabe
Aus der folgenden Ausgabe geht hervor, dass die standardmäßige schwarze Farbe des Texts mithilfe der Klasse text-{color}-{number} in die angegebenen Farben geändert wird:
Wie verwende ich verschiedene Schriftfamilien in Tailwind?
Die Schriftart eines Textelements kann verwendet werden, um einen bestimmten Text hervorzuheben. Jede Schriftart hat ihre eigenen Eigenschaften. Um die Schriftart eines Elements in Tailwind zu ändern, verwenden Sie die folgende Klasse:
Schriftart- { Familie }Tailwind bietet drei Standardschriftfamilien, d. h. „ ohne ',' Serife ', Und ' Mono “. Jede dieser Schriftfamilien hat einen anderen Schriftstil.
Ebenso die „ Schriftart-{Gewicht} Die Klasse „kann verwendet werden, um den Text fett, hell oder normal zu machen. Lassen Sie uns anhand einer Demonstration die Schriftstärke für verschiedene Schriftfamilien in Tailwind bereitstellen:
< P Klasse = „Font-Mono Font-Extrabold Text-Center“ > Dies ist ein extra fetter Text in der Schriftart MONO < / P >< P Klasse = „font-serif font-semibold text-center“ > Dies ist ein halbfetter Text in der Schriftart SERIF < / P >
< P Klasse = „font-sans-font-extralight-text-center“ > Dies ist ein extra heller Text in der Schriftart SANS < / P >
Erklärung zum Code:
- Die Drei ' P „Elemente werden von den Schriftfamilien „mono“, „serf“ und „sans“ unter Verwendung der „ Schriftfamilie} ' Klasse.
- Ebenso die drei „ P „Elemente werden bereitgestellt als „ extrafett ',' halbfett ', und das ' Extra-Licht ”Schriftstärken mit dem „ Schriftart-{Gewicht} ' Klasse.
- Alle diese Elemente verwenden das „ Text-Center ”-Klasse, die den Text in der Mitte des Elements platziert.
Ausgabe
Die gegebene Ausgabe zeigt, dass jedes „ P „Element hat eine andere Schriftfamilie und Schriftstärke:
Wie fügt man dem Text in Tailwind Unterstreichungsdekorationen hinzu?
Textelemente können auch durch das Hinzufügen verschiedener Arten von Unterstreichungen gestaltet werden. Dies kann genutzt werden, um einen Teil eines Textes hervorzuheben. Um einem Textelement Unterstreichungen hinzuzufügen, wird die folgende Klasse verwendet:
unterstreichen Dekoration- { Stil }Das Wort ' unterstreichen „ gibt dem Element eine grundlegende Unterstreichung und das „ Dekoration-{Stil} Die Klasse „wird verwendet, um der Unterstreichung verschiedene Stile bereitzustellen. Lassen Sie uns dies anhand der unten bereitgestellten Demonstration verstehen:
< P Klasse = „Unterstreichungsdekoration-durchgehender Text-Mitte“ > Dieser Text ist durchgezogen unterstrichen < / P >< P Klasse = „Dekoration unterstreichen – doppelter Text – zentrieren“ > Dieser Text ist doppelt unterstrichen < / P >
< P Klasse = „Dekoration-Wellentext-Mitte unterstreichen“ > Dieser Text ist wellenförmig unterstrichen < / P >
< P Klasse = „Ziergepunktete Textmitte unterstreichen“ > Dieser Text ist gepunktet unterstrichen < / P >
Im obigen Code gibt es vier „ P ” Elemente, die von der „ bereitgestellt werden solide ',' doppelt ',' wellig ', Und ' gepunktet ” gestylte Unterstreichungen.
Ausgabe:
Aus der folgenden Ausgabe geht klar hervor, dass die Elemente mithilfe der verschiedenen unterstrichenen Dekorationsklassen gestaltet wurden:
Wie kann man in Tailwind Einrückungen in den Text einfügen?
In jedem Textdokument werden Einzüge zum Formatieren von Textinhalten verwendet. Tailwind stellt außerdem eine Standardklasse bereit, um Textinhalte mithilfe der folgenden Klasse einzurücken:
Einzug- { Breite }Die Breite in der oben definierten Syntax ist für die Größe des Einrückungsrandes verantwortlich, der dem Textinhalt zur Verfügung gestellt wird.
Lassen Sie uns zwei Textelemente formatieren, indem wir ihnen unterschiedliche Einrückungswerte zuweisen, und sehen wir uns das Ergebnis an:
< P Klasse = „indent-4 py-12“ > Dies ist ein Beispieltext und er wird mit der Einrückung mithilfe der Klasse „indent-4“ bereitgestellt. < / P >< P Klasse = „Einzug-28“ > Dies ist ein Beispieltext und er wird mit der Einrückung mithilfe der Klasse „indent-28“ bereitgestellt. < / P >
Im obigen Code sind zwei „ P ” sind mit der Einrückung der Breite versehen „ 4 ” & „ 28 ' jeweils. Das erste Element wird zusätzlich mit der Polsterung oben-unten versehen, mit dem „ S. 12 ' Klasse.
Ausgabe:
In der folgenden Ausgabe ist zu sehen, dass das zweite Textelement aufgrund der größeren Einrückungsbreite einen größeren Rand am Textanfang hat:
Dabei geht es darum, den Text mit Tailwind zu gestalten.
Abschluss
Tailwind bietet verschiedene Klassen für die Gestaltung von Textelementen. Um den Text in Tailwind zu formatieren, kann der Benutzer „ text-{color}-{number} ',' Textausrichtung} ',' unterstreichen Dekoration-{Stil} ', Und ' indent-{width} ' Klasse. Dieser Artikel enthält eine Anleitung zum Gestalten des Texts mithilfe verschiedener Klassen in Tailwind.