Wie man Tailwind auf einer Svelte-Seite verwendet

Lassen Sie uns eine einfache Svelte-Seite aufsetzen und Tailwind für das Styling integrieren. Ein Vorteil der Arbeit mit Tailwind ist, dass es keinen Kontextwechsel zwischen HTML und CSS gibt, da Sie Stile direkt als Klassen auf dem HTML anwenden. Bei Svelte ist ohnehin alles in derselben Datei, aber trotzdem benötigen Sie so nicht einmal einen <style> Abschnitt in Ihren .svelte Dateien.

Wenn Sie ein Svelte-Entwickler oder -Enthusiast sind und Tailwind CSS in Ihrer Svelte-App verwenden möchten, untersucht dieser Artikel den einfachsten und geradlinigsten Weg, Tailwind in Ihrer App zu installieren und schnell eine einzigartige, moderne Benutzeroberfläche für Ihre App zu erstellen.

Wenn Sie sich ein funktionierendes Beispiel ansehen möchten, hier ist ein funktionierendes GitHub-Repository.

Schritt 1: Eine neue Svelte-Seite erstellen

Svelte stellt uns eine Startervorlage zur Verfügung, die wir verwenden können. Sie erhalten sie entweder, indem Sie das Svelte GitHub-Repository klonen oder indem Sie degit verwenden. Die Verwendung von degit bietet uns bestimmte Vorteile, z. B. hilft es uns, eine Kopie der Startervorlage zu erstellen, ohne den gesamten Git-Verlauf herunterzuladen (im Gegensatz zu git clone). Dies beschleunigt den Prozess. Beachten Sie, dass degit Node 8 und höher benötigt.

Führen Sie den folgenden Befehl aus, um die Starter-App-Vorlage mit degit zu klonen

npx degit sveltejs/template project-name

Navigieren Sie in das Verzeichnis des Starterprojekts, damit wir beginnen können, Änderungen daran vorzunehmen

cd project-name

Die Vorlage ist derzeit größtenteils leer, daher müssen wir einige erforderliche npm-Pakete installieren

npm install

Jetzt, da Ihre Svelte-App bereit ist, können Sie sie mit Tailwind CSS kombinieren, um eine schnelle, leichte, einzigartige Web-App zu erstellen.

Schritt 2: Tailwind CSS hinzufügen

Lassen Sie uns Tailwind CSS zu unserer Svelte-App hinzufügen, zusammen mit einigen Entwicklungsabhängigkeiten, die bei der Einrichtung helfen.

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

 # or

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Die drei Tools, die wir mit dem obigen Befehl herunterladen

1. Tailwind
2. PostCSS
3. Autoprefixer

PostCSS ist ein Tool, das JavaScript verwendet, um CSS zu transformieren und zu verbessern. Es verfügt über eine Reihe von Plugins, die verschiedene Funktionen ausführen, wie z. B. das Polyfilling zukünftiger CSS-Features, das Hervorheben von Fehlern in Ihrem CSS-Code, die Kontrolle des Geltungsbereichs von CSS-Klassennamen usw.

Autoprefixer ist ein PostCSS-Plugin, das Ihren Code durchläuft und Vendor-Präfixe zu Ihren CSS-Regeln hinzufügt (Tailwind tut dies nicht automatisch), wobei caniuse als Referenz verwendet wird. Während Browser sich dafür entscheiden, Präfixe für CSS-Eigenschaften nicht mehr so zu verwenden wie früher, verlassen sich einige ältere Browser immer noch darauf. Autoprefixer hilft bei dieser Rückwärtskompatibilität und unterstützt auch die zukünftige Kompatibilität für Browser, die möglicherweise ein Präfix zu einer Eigenschaft hinzufügen, bevor sie zu einem Standard wird.

Derzeit arbeitet Svelte mit einer älteren Version von PostCSS. Die neueste Version, PostCSS 8, wurde veröffentlicht im September 2020. Um Versionsfehler zu vermeiden, gibt unser obiger Befehl daher PostCSS 7 anstelle von 8 an. Eine PostCSS 7-kompatible Version von Tailwind ist über den compat-Kanal auf npm verfügbar.

Schritt 3: Tailwind konfigurieren

Nachdem wir Tailwind installiert haben, erstellen wir die benötigte Konfigurationsdatei und nehmen die notwendigen Einstellungen vor. Führen Sie im Stammverzeichnis Ihres Projekts Folgendes aus, um eine Datei tailwind.config.js zu erstellen

npx tailwindcss init  tailwind.config.js

Als hochgradig anpassbares Framework erlaubt uns Tailwind, seine Standardkonfigurationen einfach mit benutzerdefinierten Konfigurationen innerhalb dieser Datei tailwind.config.js zu überschreiben. Hier können wir Dinge wie Abstände, Farben, Schriftarten usw. einfach anpassen.

Die Datei tailwind.config.js wird bereitgestellt, um „gegen das Framework zu kämpfen“, was bei anderen CSS-Bibliotheken üblich ist. Anstatt zu versuchen, die Auswirkungen bestimmter Klassen rückgängig zu machen, gehen Sie hierher und geben Sie an, was Sie möchten. In dieser Datei definieren wir auch die im Projekt verwendeten PostCSS-Plugins.

Die Datei enthält einige Standardcodes. Öffnen Sie sie in Ihrem Texteditor und fügen Sie diesen Kompatibilitäts-Code hinzu

future: {
  purgeLayersByDefault: true,
  removeDeprecatedGapUtilities: true,
},

In Tailwind 2.0 (der neuesten Version) werden standardmäßig alle Ebenen (z. B. Basis, Komponenten und Dienstprogramme) gelöscht. In früheren Versionen wurde jedoch nur die Dienstprogrammebene gelöscht. Wir können Tailwind manuell konfigurieren, um alle Ebenen zu löschen, indem wir das Flag purgeLayersByDefault auf true setzen.

Tailwind 2.0 entfernt auch einige Lücken-Dienstprogramme und ersetzt sie durch neue. Wir können sie manuell aus unserem Code entfernen, indem wir removeDeprecatedGapUtilities auf true setzen.

Diese helfen Ihnen, mit Verwerfungen und grundlegenden Änderungen bei zukünftigen Updates umzugehen.

PurgeCSS

Die Tausenden von Utility-Klassen, die Tailwind mitbringt, werden standardmäßig zu Ihrem Projekt hinzugefügt. Selbst wenn Sie also keine einzige Tailwind-Klasse in Ihrem HTML verwenden, trägt Ihr Projekt immer noch die gesamte Bibliothek, was es ziemlich umfangreich macht. Wir möchten, dass unsere Dateien in der Produktion so klein wie möglich sind, daher können wir purge verwenden, um alle ungenutzten Utility-Klassen vor dem Hochladen des Codes in die Produktion aus unserem Projekt zu entfernen.

Da dies hauptsächlich ein Produktionsproblem ist, geben wir an, dass purge nur in der Produktion aktiviert werden soll.

purge: {
  content: [
    "./src/**/*.svelte",
  ],
  enabled: production // disable purge in dev
},

Jetzt sollte Ihre tailwind.config.js-Datei wie folgt aussehen

const production = !process.env.ROLLUP_WATCH;
module.exports = {
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  plugins: [

  ],
  purge: {
    content: [
     "./src/**/*.svelte",

    ],
    enabled: production // disable purge in dev
  },
};

Rollup.js

Unsere Svelte-App verwendet Rollup.js, einen JavaScript-Modul-Bundler von Rich Harris, dem Erfinder von Svelte, der zum Kompilieren mehrerer Quelldateien in ein einziges Bundle verwendet wird (ähnlich wie webpack). In unserer App erfüllt Rollup seine Funktion in einer Konfigurationsdatei namens rollup.config.js.

Mit Rollup können wir unser Projekt frei in kleine, einzelne Dateien aufteilen, um die Entwicklung zu erleichtern. Rollup hilft auch beim Linting, Prettifying und Syntax-Checking unseres Quellcodes während des Bundlings.

Schritt 4: Tailwind mit Svelte kompatibel machen

Navigieren Sie zu rollup.config.js und importieren Sie das Paket sveltePreprocess. Dieses Paket hilft uns bei der Verarbeitung von CSS, die für PostCSS und Tailwind erforderlich ist.

import sveltePreprocess from "svelte-preprocess";

Fügen Sie unter „Plugins“ sveltePreprocess hinzu und fordern Sie Tailwind und Autoprefixer an, da Autoprefixer das von diesen Tools generierte CSS verarbeiten wird.

preprocess: sveltePreprocess({
  sourceMap: !production,
  postcss: {
    plugins: [
     require("tailwindcss"), 
     require("autoprefixer"),
    ],
  },
}),

Da PostCSS ein externes Werkzeug mit einer anderen Syntax als Sveltes Framework ist, benötigen wir einen Präprozessor, um es zu verarbeiten und mit unserem Svelte-Code kompatibel zu machen. Hier kommt das Paket sveltePreprocess ins Spiel. Es bietet Unterstützung für PostCSS und seine Plugins. Wir geben dem sveltePreprocess-Paket an, dass wir zwei externe Plugins von PostCSS, Tailwind und Autoprefixer, benötigen. sveltePreprocess führt den fremden Code dieser beiden Plugins über Babel aus und wandelt ihn in Code um, der vom Svelte-Compiler unterstützt wird (ES6+). Rollup bündelt schließlich den gesamten Code.

Der nächste Schritt ist das Injizieren von Tailwinds Stilen in unsere App mit der Direktive @tailwind. Sie können sich @tailwind lose als eine Funktion vorstellen, die hilft, die Dateien mit Tailwinds Stilen zu importieren und darauf zuzugreifen. Wir müssen drei Stilsätze importieren.

Der erste Stilsatz ist @tailwind base. Dies injiziert Tailwinds Basisstile – größtenteils direkt aus Normalize.css – in unser CSS. Denken Sie an die Stile, die Sie üblicherweise am Anfang von Stylesheets sehen. Tailwind nennt diese Preflight-Stile. Sie dienen dazu, browserübergreifende Inkonsistenzen zu beheben. Mit anderen Worten, sie entfernen alle Stile, die mit verschiedenen Browsern einhergehen, und stellen sicher, dass nur die von Ihnen verwendeten Stile gerendert werden. Preflight hilft, Standardränder zu entfernen, Überschriften und Listen standardmäßig ungestylt zu machen und vieles mehr. Hier ist eine vollständige Referenz aller Preflight-Stile.

Der zweite Stilsatz ist @tailwind components. Während Tailwind eine Utility-First-Bibliothek ist, die entwickelt wurde, um generische Designs zu verhindern, ist es fast unmöglich, bei einem großen Projekt keine Designs (oder Komponenten) wiederzuverwenden. Denken Sie darüber nach. Nur weil Sie eine einzigartig aussehende Website wünschen, heißt das nicht, dass alle Buttons auf einer Seite unterschiedlich gestaltet sein müssen. Wahrscheinlich werden Sie einen Button-Stil in der gesamten App verwenden.

Folgen Sie diesem Gedankengang. Wir vermeiden Frameworks wie Bootstrap, um nicht die gleiche Art von Button zu verwenden, die alle anderen verwenden. Stattdessen verwenden wir Tailwind, um unseren eigenen einzigartigen Button zu erstellen. Großartig! Aber vielleicht möchten wir diesen schön aussehenden Button, den wir gerade erstellt haben, auf verschiedenen Seiten verwenden. In diesem Fall sollte er zu einer Komponente werden. Dasselbe gilt für Formulare, Karten, Badges usw.

Alle von Ihnen erstellten Komponenten werden schließlich an der Stelle eingefügt, an der @tailwind components steht. Im Gegensatz zu anderen Frameworks wird Tailwind nicht mit vielen vordefinierten Komponenten geliefert, aber es gibt einige. Wenn Sie keine Komponenten erstellen und nur die Utility-Stile verwenden möchten, ist dieses Direktive nicht erforderlich.

Und schließlich gibt es @tailwind utilities. Hier werden Tailwinds Utility-Klassen zusammen mit den von Ihnen erstellten Klassen eingefügt.

Schritt 5: Tailwind-Stile in Ihre Seite einfügen

Es ist am besten, alle oben genannten Stile in eine High-Level-Komponente einzufügen, damit sie auf jeder Seite zugänglich sind. Sie können sie in der Datei App.svelte einfügen.

<style global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

Nachdem wir Tailwind eingerichtet haben, erstellen wir einen Website-Header, um zu sehen, wie Tailwind mit Svelte funktioniert. Wir erstellen ihn in App.svelte, innerhalb des Main-Tags.

Schritt 6: Einen Website-Header erstellen

Beginnend mit einfacher Markup-Struktur

<nav>
  <div>
    <div>
      <a href="#">APP LOGO</a>

      <!-- Menus -->
      <div>
        <ul>
          <li>
            <a href="#">About</a>
          </li>
          <li>
            <a href="#">Services</a>
          </li>
          <li>
            <a href="#">Blog</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</nav>

Dies ist der Header-HTML-Code ohne jegliches Tailwind CSS-Styling. Ziemlich Standardkram. Wir werden das „APP LOGO“ auf die linke Seite und die vier Navigationslinks rechts davon verschieben.

Lassen Sie uns nun etwas Tailwind CSS hinzufügen

<nav class="bg-blue-900 shadow-lg">
  <div class="container mx-auto">
    <div class="sm:flex">
      <a href="#" class="text-white text-3xl font-bold p-3">APP LOGO</a>
      
      <!-- Menus -->
      <div class="ml-55 mt-4">
        <ul class="text-white sm:self-center text-xl">
          <li class="sm:inline-block">
            <a href="#" class="p-3 hover:text-red-900">About</a>
          </li>
          <li class="sm:inline-block">
            <a href="#" class="p-3 hover:text-red-900">Services</a>
          </li>
          <li class="sm:inline-block">
            <a href="#" class="p-3 hover:text-red-900">Blog</a>
          </li>
          <li class="sm:inline-block">
            <a href="#" class="p-3 hover:text-red-900">Contact</a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</nav>

Okay, lassen Sie uns all die Klassen aufschlüsseln, die wir gerade zum HTML hinzugefügt haben. Zuerst sehen wir uns das <nav>-Element an

<nav class="bg-blue-900 shadow-lg">

Wir wenden die Klasse bg-blue-900 an, um unserem Header einen blauen Hintergrund mit der Stärke 900 zu geben, was dunkel ist. Die Klasse shadow-lg wendet einen großen äußeren Box-Schatten an. Der Schatteneffekt, den diese Klasse erzeugt, wird 0px oben, 10px rechts, 15px unten und -3px links sein.

Als Nächstes kommt das erste Div, unser Container für das Logo und die Navigationslinks

<div class="container mx-auto">

Um es und unsere Navigationslinks zu zentrieren, verwenden wir die Klasse mx-auto. Sie entspricht margin: auto und zentriert ein Element horizontal innerhalb seines Containers.

Weiter zum nächsten Div

<div class="sm:flex">

Standardmäßig ist ein Div ein Block-Element. Wir verwenden die Klasse sm:flex, um unseren Header zu einem Block-Flex-Container zu machen, damit seine Kinder responsiv sind (damit sie leicht schrumpfen und wachsen können). Wir verwenden das Präfix sm, um sicherzustellen, dass der Stil auf alle Bildschirmgrößen (klein und größer) angewendet wird.

Nun zum Logo

<a href="#" class="text-white text-3xl font-bold p-3">APP LOGO</a>

Die Klasse text-white macht, wie der Name schon sagt, den Text des Logos weiß. Die Klasse text-3xl setzt die Schriftgröße unseres Logos (die auf 1.875rem eingestellt ist) und seine Zeilenhöhe (die auf 2.25rem eingestellt ist). Von dort setzt p-3 einen Abstand von 0.75rem auf allen Seiten des Logos.

Das bringt uns zu

<div class="ml-55 mt-4">

Wir geben den Navigationslinks einen linken Rand von 55%, um sie nach rechts zu verschieben. Es gibt jedoch keine Tailwind-Klasse dafür, also haben wir einen *benutzerdefinierten Stil* namens ml-55 erstellt, einen Namen, der frei erfunden ist, aber für „margin-left 55%“ steht.

Es ist eine Sache, eine benutzerdefinierte Klasse zu benennen. Wir müssen sie auch zu unseren Stil-Tags hinzufügen

.ml-55 {
  margin-left: 55%;
}

Es gibt noch eine weitere Klasse dort: mt-4. Können Sie erraten, was sie tut? Wenn Sie geraten haben, dass sie einen oberen Rand festlegt, dann liegen Sie richtig! In diesem Fall ist sie für unsere Navigationslinks auf 1rem eingestellt.

Als Nächstes sind die Navigationslinks in einer ungeordneten Liste eingeschlossen, die einige Klassen enthält

<ul class="text-white sm:self-center text-xl">

Wir verwenden erneut die Klasse text-white, gefolgt von sm:self-center, um die Liste zu zentrieren – wieder verwenden wir das Präfix sm, um sicherzustellen, dass der Stil auf alle Bildschirmgrößen (klein und größer) angewendet wird. Dann gibt es text-xl, was die extra-große eingestellte Schriftgröße ist.

Für jedes Listenelement

<li class="sm:inline-block">

Die Klasse sm:inline-block setzt jedes Listenelement als Inline-Block-Element, wodurch sie nebeneinander erscheinen.

Und schließlich der Link in jedem Listenelement

<a href="#" class="p-3 hover:text-red-900">

Wir verwenden die Utility-Klasse hover:text-red-900, um jeden Link beim Überfahren mit der Maus rot zu machen.

Lassen Sie uns unsere App in der Kommandozeile ausführen

npm run dev 

Das ist, was wir bekommen sollten

Und *das* ist, wie wir Tailwind CSS mit Svelte in sechs kleinen Schritten verwendet haben!

Fazit

Ich hoffe, Sie wissen jetzt, wie Sie Tailwind CSS in unsere Svelte-App integrieren und konfigurieren können. Wir haben einige ziemlich grundlegende Stile behandelt, aber es gibt immer mehr zu lernen! Hier ist eine Idee: Versuchen Sie, das Projekt, an dem wir gearbeitet haben, zu verbessern, indem Sie der Seite ein Anmeldeformular und einen Fußzeile hinzufügen. Tailwind bietet eine umfassende Dokumentation zu all seinen Utility-Klassen. Gehen Sie sie durch und machen Sie sich mit den Klassen vertraut.

Lernen Sie besser mit Videos? Hier sind ein paar ausgezeichnete Videos, die sich ebenfalls mit dem Prozess der Integration von Tailwind CSS mit Svelte befassen.