DatenGenossen DATEN GENOSSEN Organisiert & Produktiv im digitalen Alltag.
YouTube
Facebook Instagram Twitter YouTube GitHub RSS-Feed
Webdesign & -entwicklung

Tailwind CSS v3: Installation mit Tailwind CLI & Play CDN

Tailwind CSS - v3
Kategorie:
Webdesign & -entwicklung
Veröffentlicht am:
Lesedauer:
3 Minuten
Autor:
Jürgen Schadek

Inhalt

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.

Editor Setup für Tailwind CSS

Schlagwörter:
Tailwind CSS;  CSS;