Tailwind CSS

Components verwenden Tailwind CSS für Styling.

Übersicht

Alle Components haben Zugriff auf:

• Tailwind CSS Utility Classes - Komplettes Framework
• Design Tokens - CMS-konfigurierte Farben

<div class="p-6 bg-white rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-gray-900 mb-4">{{title}}</h2>
  <p class="text-gray-600">{{description}}</p>
  <button class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark">
    {{ctaText}}
  </button>
</div>

Design Tokens (Empfohlen)

Verwende Design Tokens statt fester Farben. Sie können vom CMS-Admin geändert werden.

<!-- ✓ Gut: Design Tokens -->
<button class="bg-primary hover:bg-primary-dark text-white">
  Click me
</button>

<!-- ✗ Vermeiden: Feste Farben -->
<button class="bg-blue-600 hover:bg-blue-700 text-white">
  Click me
</button>

Verfügbare Tokens:

• Brand: primary, secondary (jeweils mit -light und -dark)
• Feedback: success, error, warning, info (jeweils mit -light und -dark)
• Semantic: text-body, text-heading, text-muted, bg-default, bg-subtle
• Grays: gray-50 bis gray-900

Detaillierte Dokumentation: Design Tokens

Tailwind CSS Basics

Layout

<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Spacing

<!-- Padding -->
<div class="p-4">Padding all sides</div>
<div class="px-6 py-4">Horizontal & Vertical</div>

<!-- Margin -->
<div class="mt-4 mb-8">Top & Bottom margin</div>
<div class="mx-auto">Centered</div>

Typography

<h1 class="text-4xl font-bold">Heading</h1>
<p class="text-base text-gray-600 leading-relaxed">Body text</p>

Responsive Design

<div class="
  w-full              <!-- Mobile: 100% -->
  md:w-1/2            <!-- Tablet: 50% -->
  lg:w-1/3            <!-- Desktop: 33% -->
">
  Responsive width
</div>

Breakpoints:

• sm: - 640px
• md: - 768px
• lg: - 1024px
• xl: - 1280px

Hover & Focus States

<button class="
  bg-primary
  hover:bg-primary-dark
  focus:ring-2
  focus:ring-primary
  transition-colors
">
  Interactive Button
</button>

Tailwind Dokumentation

Für vollständige Referenz siehe Tailwind CSS Docs:

• Layout - Flexbox, Grid, Display
• Spacing - Padding, Margin, Gap
• Typography - Font, Size, Weight
• Colors - Text, Background, Border
• Borders - Radius, Width, Style
• Effects - Shadow, Opacity, Blur
• Transitions - Animations

Custom CSS

Für komplexe Styles verwende <style> Blöcke in component.html:

<div class="gradient-card">
  <h2>{{title}}</h2>
</div>

<style>
  .gradient-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .gradient-card {
    animation: fadeIn 0.6s ease-out;
  }
</style>

Wann Custom CSS verwenden:

• ✅ Komplexe Gradients
• ✅ Custom Animations
• ✅ Pseudo-Elemente (::before, ::after)
• ❌ Einfache Farben, Padding (→ Tailwind)
• ❌ Layouts (→ Tailwind Grid/Flex)

Tailwind v4

Das System verwendet Tailwind CSS v4 mit:

• CSS-basierte Konfiguration (@theme)
• Design Tokens als CSS-Variablen
• Automatisches Purging (nur genutzte Classes im Output)

Build: Tailwind CLI v4 Dev: Vite + Tailwind v4 Plugin

Best Practices

1. Design Tokens bevorzugen

<!-- ✓ Flexibel -->
<div class="bg-primary">Uses CMS color</div>

<!-- ✗ Starr -->
<div class="bg-blue-600">Fixed color</div>

2. Responsive Mobile-First

<!-- ✓ Mobile-First -->
<div class="text-sm md:text-base lg:text-lg">

<!-- ✗ Desktop-First -->
<div class="text-lg md:text-base sm:text-sm">

3. Utility-First, dann Custom

<!-- ✓ Erstmal Tailwind versuchen -->
<div class="p-6 bg-white rounded-lg shadow-md">

<!-- ✗ Custom CSS für alles -->
<div class="custom-card">
<style>
  .custom-card {
    padding: 1.5rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
</style>

4. Semantic Classes für Wiederholung

Wenn du denselben Style mehrfach brauchst:

<!-- Mehrfach verwendet -->
<button class="btn-primary">Button 1</button>
<button class="btn-primary">Button 2</button>

<style>
  .btn-primary {
    @apply px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors;
  }
</style>

Häufige Patterns

Card

<div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
  <h3 class="text-xl font-bold mb-2">{{title}}</h3>
  <p class="text-gray-600">{{description}}</p>
</div>

Button

<button class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors">
  {{text}}
</button>

Alert

<div class="p-4 bg-success-light text-success-dark border-l-4 border-success rounded">
  <p class="font-semibold">Success!</p>
  <p>{{message}}</p>
</div>

Input

<input
  type="text"
  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
  placeholder="Enter text..."
>

Nächste Schritte

• Design Tokens - Alle verfügbaren Tokens
• Tailwind CSS Docs - Komplette Referenz
• Component Basics - Component-Struktur