Hinzufügen von Basisstilen in Tailwind

Dieser Beitrag veranschaulicht alle möglichen Aspekte zum Hinzufügen von „Basisstilen“ in Tailwind CSS.

Wie füge ich „Basis“-Stile in Tailwind hinzu?

„Tailwind CSS“ verfügt über die folgenden drei Methoden, um die „Basis“-Stile im gesamten HTML-Inhalt oder in einem bestimmten Element hinzuzufügen:

• Verwenden Sie „CSS“, um Basisstile in Tailwind hinzuzufügen.
• Verwenden Sie „Plugin“, um Basisstile in Tailwind hinzuzufügen.

Lassen Sie uns sie einzeln erkunden.

Voraussetzungen
Bevor wir mit der praktischen Umsetzung fortfahren, werfen wir zunächst einen Blick auf das neu erstellte Projekt namens „Linuxhint“, das zum Hinzufügen der „Basisstile“ verwendet wird:

Projektdateistruktur

Navigieren Sie nun zur Datei „index.html“ und sehen Sie sich den HTML-Code an:

In den obigen Codezeilen:

Ausgang
Die Ausgabe des obigen Codes wird hier angezeigt:

Verwenden Sie nun die besprochene Methode, um den obigen HTML-Code anzupassen, indem Sie die Basisstile hinzufügen. Beginnen wir mit der Tailwind-Methode „CSS“.

Methode 1: Verwenden Sie CSS, um „Basisstile“ in Tailwind hinzuzufügen

Die einfachste und einfachste Methode zum Hinzufügen eines Basisstils zu einem bestimmten HTML-Element besteht darin, sie in die Haupt-CSS-Datei des Projekts einzufügen. Lassen Sie uns diese Aufgabe praktisch ausführen, indem wir die angegebenen Schritte befolgen.

Schritt 1: Öffnen Sie die CSS-Datei
Öffnen Sie zunächst die Haupt-CSS-Datei, d. h. „ style.css “, das die integrierten Rückenwind-Ebenen „base“, „components“ und „utilities“ enthält:

Schritt 2: Fügen Sie das CSS hinzu
Fügen Sie als Nächstes den „Basis“-Stil für die spezifischen HTML-Elemente „

“ und „

“ hinzu, indem Sie die Klassen mithilfe des „ @anwenden ”-Direktive in der „Basis“-Ebene mit Hilfe der „ @Schicht ' Stichwort. Die „@layer“-Schlüsselwörter fügen die definierten Klassen auf der angegebenen „Basis“-Ebene hinzu:

@layer-Basis {
h2 {
@apply text-3xl;
}
h3 {
@apply text-xl;
}
}

In den obigen Codezeilen ist das „ Schriftgröße Die Klasse „“ wird auf die Elemente „

“ und „

“ angewendet, um sie jeweils auf die angegebene Größe zu vergrößern:

Speichern Sie die Datei (Strg + S).

Schritt 3: Ausgabe
Führen Sie nun den Code auf dem Live-Server aus und sehen Sie sich die Ausgabe wie folgt an:

Hier zeigt die Ausgabe, dass die Tailwind-Klasse „Schriftgröße“ erfolgreich auf das angegebene Element in der Basisebene angewendet wurde.

Notiz : Der gleiche Ansatz wird für alle anderen Tailwind-CSS-Klassen verwendet.

Methode 2: Verwenden Sie das Plugin, um „Basisstile“ in Tailwind hinzuzufügen

Eine weitere nützliche Methode zum Hinzufügen von „Basis“-Stilen besteht darin, einen „ Plugin ” und verwenden Sie das „ addBase() ” Funktion. Diese Funktion hilft bei der Registrierung neuer Klassen im „ Base ” Layer-Direktive. Diese Funktion wird in der Tailwind-Datei „tailwind.config.js“ verwendet. Machen wir es praktisch.

Schritt 1: Definieren Sie die Funktion „addBase()“.
Navigieren Sie zunächst zu „ tailwind.config.js ”Konfigurationsdatei und fügen Sie die Basisstile aus dem Plugin hinzu und rufen Sie die Funktion „addBase()“ auf:

Speicher die Datei.

Schritt 2: Ausgabe
Führen Sie abschließend den angegebenen HTML-Code aus und sehen Sie sich die Ausgabe an:

Wie zu sehen ist, wird die Tailwind-Klasse „Font Size“, die in der Funktion „addBase()“ als JavaScript-Objekt definiert ist, auf die angegebenen HTML-Elemente angewendet.

Abschluss

Tailwind-Basisstile können einfach mit dem „ CSS ”-Klassen in der Haupt-CSS-Datei und die „ Plugin ' mit dem ' addBase() ”-Funktion in der Konfigurationsdatei. Die „CSS“-Methode gilt als die einfachste Methode, da sie nur die Basisstile in der „Basis“-Ebene definiert und diese automatisch auf das angegebene Element implementiert. Andererseits ist der Abschnitt „Plugin“ der „ tailwind.config.js Die Datei „addBase()“ benötigt die Funktion „addBase()“, um die Basisstile als JavaScript-Objekte zu definieren. In diesem Beitrag wurden alle möglichen Aspekte zum Hinzufügen von Basisstilen in Tailwind CSS erläutert.