Dieser Artikel veranschaulicht die Methode zum Formatieren von Überschriften durch Hinzufügen des Basisstils in Tailwind.
Wie formatiere ich Überschriften mit dem Basisstil „Tailwind“?
Um Überschriften in Tailwind zu gestalten, sehen Sie sich die angegebenen Schritte an:
- Öffnen Sie die CSS-Datei des Projekts.
- Fügen Sie in der CSS-Datei den Basisstil zu den Überschriften hinzu, indem Sie „ @Schicht ” Richtlinie im Rahmen der „ @tailwind base; ” Direktive.
- Erstellen Sie ein HTML-Programm und verwenden Sie darin Überschriftenelemente.
- Führen Sie das HTML-Programm aus und überprüfen Sie die Ausgabe.
Schritt 1: Fügen Sie den Überschriften in der CSS-Datei einen Basisstil hinzu
Öffnen Sie zunächst das „ style.css ”-Datei und fügen Sie den Basisstil zu den darin enthaltenen Überschriften hinzu, indem Sie die Datei „ @Schicht ” Direktive. Beispielsweise haben wir den folgenden Überschriften den Basisstil hinzugefügt:
@Rückenwind Base ;
@Schicht Base {
h1 {
@anwenden text-6xl ;
}
h2 {
@anwenden text-5xl ;
}
h3 {
@anwenden text-4xl ;
}
h4 {
@anwenden text-3xl ;
}
h5 {
@anwenden text-2xl ;
}
}
@Rückenwind Komponenten ;
@Rückenwind Dienstprogramme ;
Hier:
- „ @layer base { … } „definiert eine neue Basisebene und enthält die Stile für die Überschriftenkomponenten.
- „ h1 { @apply text-6xl; } ” gilt das „ text-6xl ” Utility-Klasse zum „ h1 ”Elemente.
- Ebenso: „ h2 “, „ h3 “, „ h4 ', Und ' h5 Bei „Elementen“ wird die Schriftgröße mithilfe von „ festgelegt. @anwenden ” und entsprechende Dienstprogrammklassen (text-5xl, text-4xl, text-3xl und text-2xl).
Schritt 2: Erstellen Sie eine HTML-Webseite mit Überschriften
Erstellen Sie dann das HTML-Programm und verwenden Sie darin die Überschriftenelemente. Hier haben wir folgende Überschriftenelemente verwendet:
< Körper >
< div Klasse = „h-screen justify-center text-center bg-violet-400“ >
< h1 > Überschrift 1 < / h1 >
< h2 > Überschrift 2 < / h2 >
< h3 > Überschrift 3 < / h3 >
< h4 > Überschrift 4 < / h4 >
< h5 > Überschrift 5 < / h5 >
< / div >
< / Körper >
Schritt 3: Führen Sie das HTML-Programm aus
Führen Sie abschließend das HTML-Programm aus und sehen Sie sich die Webseite zur Überprüfung an:
Die obige Ausgabe hat die Überschriften so angezeigt, wie sie Stile in der CSS-Datei waren.
Abschluss
Um Überschriften in Tailwind zu formatieren, öffnen Sie die CSS-Datei und fügen Sie den Basisstil zu den Überschriften hinzu, indem Sie „ @Schicht ” Richtlinie im Rahmen der „ @tailwind base; ” Direktive. Erstellen Sie dann ein HTML-Programm und verwenden Sie darin Überschriftenelemente. Sehen Sie sich abschließend die HTML-Webseite an, um die Ausgabe zu überprüfen. In diesem Artikel wurde die Methode zum Formatieren von Überschriften durch Hinzufügen des Basisstils in Tailwind erläutert.