Dieser Beitrag demonstriert das Verfahren zum Konfigurieren der Vorlagenpfade in Tailwind CSS.
Wie konfiguriere ich Vorlagenpfade in Tailwind CSS?
Der ' tailwind.config.js Die Konfigurationsdatei wird verwendet, um die Vorlagenpfade zu konfigurieren, in die der Benutzer das Tailwind-CSS einbetten möchte. Es ist standardmäßig nicht vorhanden, kann jedoch mit dem Paketmanager „npm“ im Projekt erstellt werden.
In diesem Abschnitt werden einige wesentliche Schritte zum Konfigurieren der Vorlagenpfade in der Datei „tailwind.config.js“ ausgeführt.
Notiz : Um „Tailwind CSS“ zu implementieren, installieren Sie zunächst „ Node.js „Anwendung in Ihrem System über den bereitgestellten Link“ https://nodejs.org/en ” um die Befehle auszuführen.
Schritt 1: „TailwindCSS“ installieren
Erstellen Sie zunächst ein neues Projekt mit dem Namen „Projekt1“ und öffnen Sie es im Code-Editor. Öffnen Sie nun das neue Terminal und installieren Sie das „Tailwind CSS“ mit Hilfe des folgenden Befehls:
npm install -D tailwindcss
Im obigen Befehl: „ npm „ist der Knotenpaketmanager, der „TailwindCSS“ wie folgt installiert:
Hier zeigt die Ausgabe, dass das „Tailwind CSS“ und seine Pakete erfolgreich heruntergeladen wurden.
Schritt 2: Erstellen Sie die Tailwind-Konfigurationsdatei
Als nächstes erstellen Sie die Tailwind CSS-Konfigurationsdatei „ tailwind.config.js ” um seine Funktionalität zu erweitern, z. B. die Angabe der HTML-Vorlagenpfade, benutzerdefinierter Klassen und viele andere mit diesem Befehl:
Die Ausgabe zeigt, dass die angegebene Konfigurationsdatei erstellt wurde. Werfen Sie jetzt einen Blick auf „ tailwind.config.js ' Datei:
Schritt 3: Fügen Sie die Tailwind-Anweisungen zur Haupt-CSS-Datei hinzu
Um nun spezielle Funktionen zum erstellten Tailwind-Projekt hinzuzufügen, fügen Sie die folgenden drei bereits vorhandenen Tailwind-Anweisungen im Hauptteil hinzu: style.css ' Datei:
@tailwind-Komponenten;
@tailwind-Dienstprogramme;
Im obigen Codeblock:
- Base : Es ist die erste Ebene von „Tailwind CSS“, die standardmäßig den Stil der Webseite ändert, z. B. Hintergrundfarbe, Textfarbe oder Schriftfamilie.
- Komponenten : Diese zweite Ebene ist innerhalb der „Container“-Klasse verfügbar, die die Breite entsprechend der Browsergröße hinzufügt. In diesem Abschnitt kann der Benutzer seine eigenen erstellten externen Komponenten hinzufügen.
- Dienstprogramme : Es ist die dritte Ebene, die fast alle Stilklassen wie Schatten, Farben, Hinzufügen, Flex und viele andere Klassen zusammenfasst.
Diese Anweisungen sind im folgenden Fenster zu sehen:
Schritt 4: Erstellen Sie das CSS
Erstellen Sie nun das CSS mit dem Tailwind CLI-Tool, indem Sie den folgenden Befehl ausführen. Es scannt alle Vorlagendateien und erstellt das CSS im „ dist/output.css ' Datei:
Es ist zu beobachten, dass der obige Befehl erfolgreich ausgeführt wurde. Nun sieht die Dateistruktur von „project1“ so aus:
Schritt 5: Erstellen Sie eine HTML-Vorlage und konfigurieren Sie ihren Pfad
Erstellen Sie die HTML-Vorlage, in die der Benutzer das „Tailwind CSS“ einbetten möchte, und konfigurieren Sie dann seinen Pfad im „ tailwind.config.js “. Werfen wir zunächst einen Blick auf die folgende HTML-Vorlage „ index.html ”:
< Verknüpfung href = „/dist/output.css“ rel = „Stylesheet“ >
< / Kopf >
< Körper >
< h2 Klasse = „text-center font-bold text-white bg-orange-500“ >Willkommen bei Linuxhint!< / h2 >< br >
< h3 Klasse = „text-center font-bold text-blue-600 bg-pink-400“ >Erstes Tutorial: Tailwind CSS Framework.< / h3 >< br >
< P Klasse = „text-center text-green-500“ >Tailwind CSS ist ein bekanntes CSS-Framework, das beim Festlegen der vordefinierten CSS-Klassen hilft Stil Ihre HTML-Elemente.< / P >
< / Körper >
In den obigen Codezeilen:
- Der Abschnitt „Kopf“ verwendet das „ „Tag zum Verknüpfen der erstellten/kompilierten CSS-Datei“ /dist/output.css ” mit der vorhandenen HTML-Datei „ index.html “.
- Der Abschnitt „Körper“ spezifiziert zunächst die „ „Tag, das die erste Unterüberschrift mithilfe der Tailwind-Klasse definiert“ Textausrichtung ” um die Ausrichtung auf „Mitte“ anzupassen, „ Schriftstärke „um den Text „fett“ zu machen, „ Textfarbe ”, um die angegebene Farbe hinzuzufügen, und das „ Hintergrundfarbe ”, um jeweils die angegebene Hintergrundfarbe anzuwenden.
- Als nächstes wird das „ ' und das ' „Tags verwenden auch die oben besprochenen Tailwind-Klassen, um ihren Inhalt zu gestalten.
Konfigurieren Sie den HTML-Vorlagenpfad
Öffnen Sie als Nächstes das „ tailwind.config.js “ und fügen Sie die Links oder den Pfad im Abschnitt „Inhalt“ der HTML-Vorlagendatei hinzu, d. h. „index.html“:
Drücken Sie ' Strg+S ”, um die neuen Änderungen zu speichern.
Schritt 6: Führen Sie den HTML-Code aus
Führen Sie abschließend den HTML-Code „index.html“ auf dem Live-Server aus und sehen Sie sich die Ausgabe an:
Ausgang
Wie Sie sehen, zeigt die Ausgabe den mit Hilfe von Tailwind CSS gestalteten HTML-Inhalt.
Abschluss
Tailwind CSS verwendet das „ tailwind.config.js ”Konfigurationsdatei zum Konfigurieren der erstellten HTML-Vorlagenpfade. Es spezifiziert die „ Inhalt ”-Abschnitt, der den genauen Pfad aller HTML-Vorlagen, Quelldateien mit Tailwind-Klassennamen und die JavaScript-Komponenten enthält. Es scannt die angegebene HTML-Datei und implementiert dann Tailwind CSS in seinen Inhalt. In diesem Beitrag wurde das vollständige Verfahren zum Konfigurieren von Vorlagenpfaden in Tailwind CSS veranschaulicht.