Tailwind CSS Tipps & Tricks

Hier sind die wichtigsten Tipps und Tricks für die Arbeit mit Tailwind CSS in deinem Astro Projekt.

1. Responsive Design

Tailwind macht responsive Design einfach:

<div class="w-full md:w-1/2 lg:w-1/3">
  <p class="text-sm md:text-base lg:text-lg">Responsive Textgröße</p>
</div>

2. Dark Mode

Dark Mode ist automatisch verfügbar:

<div class="bg-white dark:bg-gray-800">
  <p class="text-gray-800 dark:text-white">Automatischer Dark Mode</p>
</div>

3. Flexbox & Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Grid Item 1</div>
  <div>Grid Item 2</div>
  <div>Grid Item 3</div>
</div>

4. Spacing & Sizing

<div class="space-y-4">
  <div class="w-16 h-16 bg-red-500"></div>
  <div class="w-24 h-24 bg-green-500"></div>
  <div class="w-32 h-32 bg-blue-500"></div>
</div>

5. Animations

<div class="animate-pulse hover:animate-bounce">
  <!-- Animierte Elemente -->
</div>

6. Custom Classes

Erstelle eigene Utility-Klassen in deiner CSS-Datei:

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }
}

7. Arbitrary Values

Verwende beliebige Werte mit eckigen Klammern:

<div class="w-[200px] h-[150px] bg-[#ff6b6b]">
  <!-- Benutzerdefinierte Werte -->
</div>

8. Group Hover

<div class="group">
  <div class="group-hover:bg-blue-500">
    <!-- Ändert sich beim Hover über das Parent-Element -->
  </div>
</div>

9. Container Queries

<div class="@container">
  <div class="@lg:text-lg">
    <!-- Responsive basierend auf Container-Größe -->
  </div>
</div>

10. Performance Tipps

Interaktive Demo

Fazit

Tailwind CSS macht das Styling deiner Astro-Komponenten unglaublich einfach und konsistent. Mit diesen Tipps kannst du noch effizienter arbeiten!