@astrojs/ tailwind
Diese Astro-Integration erlaubt dir, Tailwinds CSS-Hilfsklassen in jeder .astro
-Datei und UI-Framework-Komponente deines Projekts zu verwenden.
Warum Tailwind?
Abschnitt betitelt Warum Tailwind?Tailwind ermöglicht es dir, Hilfsklassen anstelle von CSS zu verwenden. Diese Hilfsklassen entsprechen größtenteils einer bestimmten CSS-Eigenschaftseinstellung: Zum Beispiel entspricht das Hinzufügen von text-lg
zu einem Element dem Setzen von font-size: 1.125rem
in CSS. Du findest es möglicherweise einfacher, deine Styles mithilfe dieser vordefinierten Hilfsklassen zu schreiben und zu pflegen!
Wenn dir diese vordefinierten Einstellungen nicht gefallen, kannst du die Tailwind-Konfigurationsdatei den Designanforderungen deines Projekts anpassen. Wenn zum Beispiel der “große Text” in deinem Design tatsächlich 2rem
beträgt, kannst du die lg
fontSize-Einstellung auf 2rem
ändern.
Tailwind ist auch eine großartige Wahl, um Styles zu React-, Preact- oder Solid-Komponenten hinzuzufügen, die keinen <style>
-Tag in der Komponentendatei unterstützen.
Hinweis: Es wird im Allgemeinen davon abgeraten, sowohl Tailwind als auch eine andere Styling-Methode (z. B. Styled Components) in derselben Datei zu verwenden.
Installation
Abschnitt betitelt InstallationAstro verfügt über einen astro add
-Befehl, der das Setup offizieller Integrationen automatisiert. Wenn du möchtest, kannst du die Integrationen auch manuell installieren.
Führe einen der folgenden Befehle in einem neuen Terminal-Fenster aus.
Sollten dir dabei Probleme begegnen, melde sie gerne bei uns auf GitHub und versuche stattdessen die manuelle Installation.
Manuelle Installation
Abschnitt betitelt Manuelle InstallationInstalliere als Erstes die @astrojs/tailwind
und tailwindcss
-Pakete mit dem Paketemanager deiner Wahl.
Füge die Integration dann deiner Astro-Konfigurationsdatei hinzu, indem du die integrations
-Eigenschaft benutzt:
Erstelle als Nächstes eine tailwind.config.mjs
-Datei in deinem Projektstammverzeichnis. Du kannst folgenden Befehl ausführen, um eine Konfigurationsdatei mit Basiseinstellungen für dich erstellen zu lassen:
Zum Schluss, füge diese Basiskonfiguration in deiner tailwind.config.mjs
-Datei ein:
Anwendung
Abschnitt betitelt AnwendungWenn du diese Integration installierst, kannst du die Hilfsklassen von Tailwind sofort verwenden. Gehe zur Tailwind-Dokumentation, um zu lernen, wie man Tailwind verwendet. Wenn du eine Hilfsklasse findest, die du ausprobieren möchtest, füge sie einfach einem HTML-Element in einem Projekt hinzu!
Autoprefixer wird auch automatisch eingerichtet, wenn du im Entwicklungsmodus arbeitest; aber auch in Production-Builds, sodass Tailwind-Klassen in älteren Browsern funktionieren.
Konfiguration
Abschnitt betitelt KonfigurationTailwind konfigurieren
Abschnitt betitelt Tailwind konfigurierenWenn du die automatische Installation verwendet und jede Aufforderung mit Ja beantwortet hast, siehst du in deinem Projektstammverzeichnis eine tailwind.config.mjs
-Datei. In dieser Datei kannst du Änderungen an deiner Tailwind-Konfiguration vornehmen. Du kannst in der Tailwind-Dokumentation lernen, wie man Tailwind konfiguriert.
Wenn du keine Konfigurationsdatei findest, füge deine eigene tailwind.config.(js|cjs|mjs|ts|mts|cts)
-Datei dem Projektstammverzeichnis hinzu und die Integration wird sie verwenden. Dies kann hilfreich sein, wenn du Tailwind bereits in einem anderen Projekt konfiguriert hast und dessen Einstellungen auf das neue Projekt übertragen möchtest.
Die Integration konfigurieren
Abschnitt betitelt Die Integration konfigurierenDie Astro-Tailwind-Integration kümmert sich um die Kommunikation zwischen Astro und Tailwind und verfügt über eigene Konfigurationsoptionen. Ändere diese in der astro.config.mjs
-Datei (nicht in der Tailwind-Konfigurationsdatei), wo die Einstellungen der Integrationen deines Projekts zu finden sind.
configFile
Abschnitt betitelt configFileFrüher bekannt als config.path
in @astrojs/tailwind
v3. Sieh dir das v4 Änderungsprotokoll an, um deine Konfiguration zu aktualisieren.
Wenn du eine andere Tailwind-Konfigurationsdatei als die übliche tailwind.config.(js|cjs|mjs|ts|mts|cts)
-Datei verwenden möchtest, musst du den Ort dieser Datei in der configFile
-Option der Integration angeben. Wenn du einen relativen Pfad verwendest, wird der Pfad relativ zum aktuellen Arbeitsverzeichnis berechnet.
Es wird nicht empfohlen, eine andere Datei zu verwenden, da dies zu Problemen mit anderen Tools führen kann, die dir bei der Arbeit mit Tailwind behilflich sein können, wie zum Beispiel der offiziellen Tailwind-VS-Code-Erweiterung.
applyBaseStyles
Abschnitt betitelt applyBaseStylesFrüher bekannt als config.applyBaseStyles
in @astrojs/tailwind
v3. Sieh dir das v4 Änderungsprotokoll an, um deine Konfiguration zu aktualisieren.
Standardmäßig importiert die Integration eine einfache base.css
-Datei auf jeder Seite deines Projekts. Diese grundlegende CSS-Datei enthält die drei wichtigsten @tailwind
-Direktiven:
Um dieses Standardverhalten zu deaktivieren, setze applyBaseStyles
auf false
. Dies kann hilfreich sein, wenn du deine eigene base.css
-Datei definieren musst (zum Beispiel um die @layer
-Direktive zu verwenden). Nützlich ist das auch, wenn du nicht willst, dass base.css
in jeder Seite deines Projekts importiert wird.
Du kannst jetzt deine eigene base.css
-Datei als lokales Stylesheet importieren.
nesting
Abschnitt betitelt nestingSetze auf true
, um das tailwindcss/nesting
-PostCSS-Plugin zu verwenden. So kannst du auch verschachtelte CSS-Deklarationen neben dem Tailwind-Syntax verwenden. Diese Option ist standardmäßig auf false
gesetzt.
Beispiele
Abschnitt betitelt Beispiele- Mit dem Astro Tailwind Starter kannst mit einer Basis für dein Projekt loslegen, die Tailwind für das Styling verwendet
- Astros Homepage verwendet Tailwind. Schau dir die verwendete Tailwind-Konfigurationsdatei oder eine Beispielkomponente an
- Die Astro Ink, Sarissa Blog, und Creek Designvorlagen verwenden Tailwind für das Styling
- Für mehr Beispiele, suche nach Astro-Tailwind-Projekten auf GitHub!
Fehlerbehebung
Abschnitt betitelt FehlerbehebungKlasse existiert nicht mit @apply
-Direktive
Abschnitt betitelt Klasse existiert nicht mit @apply-DirektiveWenn du die @apply
-Direktive in dem <style>
-Tag einer Astro-, Vue-, Svelte- oder anderen Komponente verwendest, kann es zu der Fehlermeldung kommen, dass die Tailwind-Klasse nicht existiert und der Build schlägt fehl.
Statt die @layer
-Direktive in deinem globalen Stylesheet zu verwenden, füge deine eigenen Styles als Plugin in der Tailwind-Konfiguration hinzu, um den Fehler zu beheben:
Klassenbasierte Modifikatoren funkionieren nicht mit der @apply
-Direktive
Abschnitt betitelt Klassenbasierte Modifikatoren funkionieren nicht mit der @apply-DirektiveBestimmte Tailwind-Klassen mit Modifikatoren basieren auf der Kombination von Klassen über mehrere Elemente hinweg. Beispielsweise wird group-hover:text-gray
zu .group:hover .text-gray
kompiliert. Wenn dies mit der @apply
-Direktive in Astro-<style>
-Tags verwendet wird, werden die kompilierten Styles aus dem Build entfernt, da sie mit keinem Markup in der .astro
-Datei übereinstimmen. Das gleiche Problem kann auch bei Framework-Komponenten auftreten, die bereichsbezogene Styles unterstützen, wie etwa Vue und Svelte.
Um das zu beheben, kannst du die Klassen stattdessen inline verwenden:
Anderes
Abschnitt betitelt Anderes- Wenn deine Installation scheinbar nicht funktioniert, versuche den Dev-Server neu zu starten.
- Wenn du eine Seite bearbeitest und speicherst und die Seite sich nicht dementsprechend ändert, lade die Seite neu.
- Wenn das Aktualisieren der Seite deine Vorschau nicht aktualisiert oder eine Neuinstallation nicht zu funktionieren scheint, starte den Entwicklungsserver neu.
Für weitere Hilfe, komme zu uns in den #support
-Kanal auf Discord. Unsere freundlichen Support-Squad-Mitglieder helfen dir gerne!
Weitere Informationen zu Integrationen findest du in der Astro-Integrationen-Dokumentation.