Richte ein neues Projekt ein mit Tailwind CSS 4.0

Bevor wir beginnen, bedenke bitte, dass wir uns hier an der Bleeding Edge bewegen. Tailwind CSS 4.0 ist noch im Beta-Stadium und kann sich noch ändern. Wenn du damit einverstanden bist, genieße diese kurze Einführung in die Einrichtung deines nächsten Projekts.

Dieser Leitfaden verwendet das kürzlich veröffentlichte Vite 6.0 und die neueste Tailwind CSS 4.0 Beta. Bei der Einführung von Tailwind haben wir darauf geachtet, das ursprüngliche Setup von Vite so wenig wie möglich zu verändern. Auf diese Weise kannst du das Setup leicht an deine Bedürfnisse anpassen.

Richte ein neues Projek mit Vite ein

Die ersten Schritte mit Vite sind so einfach wie das Ausführen des folgenden Befehls in deinem Terminal. Wenn du während der Installation dazu aufgefordert wirst, wähle am besten Vanilla und TypeScript als Optionen. Sobald die Installation abgeschlossen ist, navigiere zum Projektverzeichnis oder öffne es in einem Code-Editor deiner Wahl.

npm create vite@latest

Installiere Tailwind CSS

Als nächstes kommt der Star der Show, Tailwind CSS 4.0. Mit Version 4 wurde die Installation von Tailwind vereinfacht und die Konfiguration wurde in eine CSS-Datei verlagert. Alles, was wir tun müssen, um Tailwind in unserem Projekt zu aktivieren, ist, die Pakete zu installieren und ein paar Zeilen in unsere Konfiguration einzufügen, um es zu laden.

npm install tailwindcss@next @tailwindcss/vite@next

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

@import "tailwindcss";

Vergesse nicht, die CSS-Datei entweder aus main.ts oder index.html zu laden.

import './tailwind.css'

Konfiguriere ein Theme für das Projekt

Für ein benutzerdefiniertes Thema verwenden wir die CSS-Eigenschaften color-scheme und light-dark(), um das bevorzugte Farbschema der Nutzer:innen automatisch zu erkennen und anzuwenden. Da Tailwind seine modernisierte P3-Farbpalette als CSS-Variablen einfügt, können wir leicht ein helles und ein dunkles Theme definieren.

@theme {
  --color-background: light-dark(var(--color-zinc-100), var(--color-zinc-950));
  --color-foreground: light-dark(var(--color-zinc-950), var(--color-zinc-100));

  --color-muted: light-dark(var(--color-zinc-50), var(--color-zinc-900));
  --color-muted-foreground: light-dark(var(--color-zinc-600), var(--color-zinc-400));

  --color-card: var(--background);
  --color-card-foreground: var(--foreground);

  --color-popover: var(--background);
  --color-popover-foreground: var(--foreground);

  --color-border: light-dark(var(--color-zinc-200), var(--color-zinc-800));

  --color-input: var(--border);

  --color-primary: var(--foreground);
  --color-primary-foreground: var(--background);

  --color-secondary: var(--muted);
  --color-secondary-foreground: var(--foreground);

  --color-accent: light-dark(var(--color-indigo-600), var(--color-indigo-400));
  --color-accent-foreground: var(--background);

  --color-destructive: light-dark(var(--color-red-600), var(--color-red-400));
  --color-destructive-foreground: var(--background);

  --color-ring: var(--accent);

  --radius-radius: 0.5rem;
}

Um light-dark() aktiv nutzen zu können, setze color-scheme auf light dark.

@layer base {
    :root {
        color-scheme: light dark;
    }
}

Nutze das Typografie-Plugin

Um die Einführung von Rich-Text-Inhalten, sei es in Form von Seiten oder Blogbeiträgen, zu erleichtern, verwenden wir @tailwindcss/typography und konfigurieren es mit Hilfe seiner eingebauten CSS-Variablen, um unser eigenes benutzerdefiniertes Rich-Text-Theme hinzuzufügen.

npm install -D @tailwindcss/typography

@plugin "@tailwindcss/typography";

Nachdem du das Plugin installiert hast, füge es einfach zu deiner tailwind.css-Datei hinzu, wie in den vorherigen Schritten beschrieben. Da das Typografie-Plugin CSS-Variablen für sein Theme verwendet, können wir ganz einfach unser eigenes Theme definieren, indem wir die Variablen in den CSS Layer Utilities auf unsere benutzerdefinierten Farben setzen.

@layer utilities {
  .prose-accent {
    --tw-prose-body: var(--color-muted-foreground);
    --tw-prose-headings: var(--color-foreground);
    --tw-prose-lead: var(--color-muted-foreground);
    --tw-prose-links: var(--color-accent);
    --tw-prose-bold: var(--color-foreground);
    --tw-prose-counters: var(--color-accent);
    --tw-prose-bullets: var(--color-accent);
    --tw-prose-hr: var(--color-border);
    --tw-prose-quotes: var(--color-foreground);
    --tw-prose-quote-borders: var(--color-accent);
    --tw-prose-captions: var(--color-muted-foreground);
    --tw-prose-kbd: var(--color-foreground);
    --tw-prose-kbd-shadows: from var(--color-foreground) r g b;
    --tw-prose-code: var(--color-foreground);
    --tw-prose-pre-code: var(--color-foreground);
    --tw-prose-pre-bg: var(--color-muted);
    --tw-prose-th-borders: var(--color-border);
    --tw-prose-td-borders: var(--color-border);
  }
}

Und das war’s! Du hast ein neues Projekt mit Tailwind CSS 4.0 erstellt. Du kannst nun damit beginnen, dein Projekt mit den neuesten Funktionen und Verbesserungen von Tailwind CSS umzusetzen. Fühle dich frei, die Konfiguration an deine Bedürfnisse anzupassen.

TL:DR

Um ein responsives Webprojekt zu konfigurieren, richte deine Umgebung mit Vite ein und füge Tailwind CSS 4.0-Abhängigkeiten hinzu. Implementiere dann die Anpassung des Themes mit CSS-Variablen und Farbschema-Optionen und aktiviere die typografischen Verbesserungen mit Plugins.