Tailwind CSS v3: Installation mit Tailwind CLI & Play CDN
- Kategorie:
- Webdesign & -entwicklung
- Veröffentlicht am:
- Lesedauer:
- 3 Minuten
- Autor:
- Jürgen Schadek
In diesem Artikel möchte ich euch zeigen, wie man das CSS-Framework „Tailwind CSS“ installiert und in eigenen Projekten verwendet.
Für die Installation gibt es vier Varianten:
- Tailwind CLI
- Tailwind als PostCSS-Plugin
- Tailwind in einen JS- oder PHP-Framework
- Play CDN
Hier zeige ich euch die beiden einfachsten Varianten, nämlich die Benutzung von Tailwind CSS mit Taiwind CLI und über Play CDN.
Benutzen von Tailwind über Play CDN
Die Benutzung von Tailwind über Play CDN ist eine gute Alternative zu Tailwind Play und gut geeignet um in der eigenen Entwicklungsumgebung Tailwind CSS zu Testen und damit kleine Projekte zu entwickeln.
Es ist nicht wirklich eine gute Wahl für eine Produktiv-Verwendung.
Um das Play CDN zu verwenden, füge einfach folgenen Code in Deine HTML-Datei ein.
<script src="https://cdn.tailwindcss.com"></script>
Hier ein Beispiel:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Servus Welt!
</h1>
</body>
</html>
Benutzen von Tailwind über CDN
Fazit
Vorteile
- einfach zu installieren und zu verwenden
Nachteile
- langsam, da von fremdem Server eingebunden
- nicht alle Funktionen:
- Standard-Theme nicht anpassbar (mit v2, funktioniert ab v3)
- Direktiven wie @apply nicht verfügbar (mit v2, funktioniert ab v3)
- keine zusätzlichen Varianten wie group-focus (mit v2, funktioniert ab v3)
- keine Plugins
- nicht verwendete Styles können nicht entfernt werden
- DSGVO: muss in die Datenschutzerklärung aufgenommen werden
Installation von Tailwind mit Tailwind CLI
Ein einfacher und schneller Weg um Tailwind CSS einzusetzen ist die Tailwind CLI zu verwenden.
Dafür legst Du mit
npm init -y
ein Projekt an. Danach installierst zu Tailwind CSS mit
npm install -D tailwindcss
und legst nun mit
npx tailwindcss init
eine “tailwind.config.js”-Datei an.
In dieser nimmst Du unter “content” alle Dateien auf, in denen Tailwind CSS verwendet werden soll. (Siehe Video)
Nun legst Du die Datei “input.css” im Ordner “src” an.
@tailwind base;
@tailwind components;
@tailwind utilities;
Mit dem Terminal-Befehl
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
startest Du den Build-Prozess und Tailwind CLI legt im Ordner “dist” eine “output.css”-Datei an. Diese verlinkst Du nun in Deinem HTML-Code.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
[Installation von Tailwind mit Tailwind CLI]https://tailwindcss.com/docs/installation)
Fazit
Vorteile
- schnelle Ladezeiten
- alle Funktionen verfügbar
- DSGVO: muss nicht in die Datenschutzerklärung aufgenommen werden
Nachteile
- geringfügig mehr Aufwand, da es erst installiert werden muss
Microsoft Visual Code - Editor Setup
Mit der offiziellen “Tailwind CSS IntelliSense”-Erweiterung für Microsoft Visual Code stellt euch Tailwind ein mächtiges Tool für die Entwicklung zur Verfügung.
- Schlagwörter:
- Tailwind CSS; CSS;