⚡Styling

Tailwind CSS Setup und Basics

Professionelles Design ohne CSS-Dateien

Tailwind CSS laesst dich direkt in deinem HTML designen -- keine separaten CSS-Dateien, keine Klassennamen ausdenken. Perfekt fuer KI-gestuetztes Bauen.

Pro-Tip — Der schnelle Weg
Sag Claude Code 'Style das mit Tailwind' und er nutzt automatisch die richtigen Utility-Klassen. Du musst kein CSS koennen.
Seite 1
1

Tailwind pruefen

Bei create-next-app mit --tailwind ist alles schon eingerichtet. Pruefe die tailwind.config.ts.

cat tailwind.config.ts
2

Erste Klassen nutzen

Tailwind funktioniert ueber Utility-Klassen direkt im HTML.

<div className="bg-blue-500 text-white p-4 rounded-lg">Hallo Welt</div>
3

Responsive Design

Nutze Breakpoint-Prefixe fuer verschiedene Bildschirmgroessen.

<div className="text-sm md:text-base lg:text-xl">Responsive Text</div>
4

Hover und States

Interaktive Zustaende direkt als Prefix.

<button className="bg-blue-500 hover:bg-blue-600 transition-colors">Klick mich</button>
5

Dark Mode

Dark Mode mit dem dark:-Prefix.

<div className="bg-white dark:bg-gray-900 text-black dark:text-white">Content</div>
Seite 2
Warum das funktioniert
  • Kein Wechsel zwischen HTML und CSS-Dateien -- alles an einem Ort.
  • Claude Code kennt alle Tailwind-Klassen und nutzt sie korrekt.
  • Dein Design sieht sofort professionell aus ohne Design-Erfahrung.
Tipps
  • Nutze die Tailwind Docs oder lass Claude Code die Klassen fuer dich waehlen.
  • Flex und Grid sind deine besten Freunde fuer Layouts.
  • Mit @apply kannst du wiederkehrende Klassen zusammenfassen, brauchst du aber selten.
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen