Setup & Installation

Diese Anleitung zeigt, wie du Tailwind CSS und Vite in deinem Projekt verwendest, um moderne Webanwendungen mit den kieks.me Brand-Farben zu erstellen.

Installation

Installiere die benötigten Dependencies mit pnpm: 

pnpm add -D tailwindcss @tailwindcss/vite vite

Vite Konfiguration

Erstelle eine vite.config.js Datei: 

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

CSS Setup

Importiere Tailwind CSS in deiner Haupt-CSS-Datei: 

@import "tailwindcss";

/* Deine Custom Styles */
:root {
  --color-aqua: #00FFDC;
  --color-navy: #1E2A45;
  --color-fuchsia: #FF008F;
}

Verwendungshinweise

Tailwind CSS

  • Utility-First-Ansatz: Verwende Utility-Klassen direkt im HTML
  • Brand-Farben: Nutze die Custom-Color-Klassen (bg-aqua, text-navy, etc.)
  • Responsive Design: Verwende Breakpoint-Präfixe (md:, lg:)
  • Custom Styles: Kombiniere Tailwind mit Custom CSS für Brand-spezifische Styles

Vite

  • Dev-Server: pnpm dev startet den Development-Server
  • Hot Module Replacement: Änderungen werden automatisch aktualisiert
  • Build: pnpm build erstellt optimierte Production-Builds
  • Performance: Schnelle Build-Zeiten und optimierte Ausgabe

Brand-Farben in Tailwind

Die Brand-Farben sind bereits als CSS-Variablen definiert und können über Custom-Klassen verwendet werden: 

<!-- Primary Color (Aqua) -->
<div class="bg-aqua text-navy">...</div>

<!-- Secondary Color (Navy) -->
<div class="bg-navy text-white">...</div>

<!-- Tertiary Color (Fuchsia) -->
<div class="bg-fuchsia text-white">...</div>

Button Komponenten

Beispiel-Implementierungen für Buttons in verschiedenen Varianten mit den kieks.me Brand-Farben.

Primary Button (Aqua) 

<button class="bg-aqua text-navy px-6 py-3 rounded-lg font-heading font-bold hover:bg-opacity-90 transition-colors">
  Primary Button
</button>

Secondary Button (Navy) 

<button class="bg-navy text-white px-6 py-3 rounded-lg font-heading font-bold hover:bg-navy-400 transition-colors">
  Secondary Button
</button>

Tertiary Button (Fuchsia) 

<button class="bg-fuchsia text-white px-6 py-3 rounded-lg font-heading font-bold hover:bg-fuchsia-600 transition-colors">
  Tertiary Button
</button>

Button Gruppe 

<div class="flex gap-4">
  <button class="bg-aqua text-navy px-6 py-3 rounded-lg font-heading font-bold hover:bg-opacity-90 transition-colors">
    Primary
  </button>
  <button class="bg-navy text-white px-6 py-3 rounded-lg font-heading font-bold hover:bg-navy-400 transition-colors">
    Secondary
  </button>
  <button class="bg-fuchsia text-white px-6 py-3 rounded-lg font-heading font-bold hover:bg-fuchsia-600 transition-colors">
    Tertiary
  </button>
</div>

Card Komponenten

Beispiel-Implementierungen für Cards mit verschiedenen Stilen und Brand-Farben.

Standard Card

Card Titel

Dies ist eine Standard-Card mit Shadow-Effekt. Perfekt für Content-Bereiche und Informationsblöcke. 

<div class="card-aqua">
  <h4 class="font-heading text-xl font-bold text-navy mb-2">Card Titel</h4>
  <p class="font-body text-gray-700">
    Dies ist eine Standard-Card mit Shadow-Effekt.
  </p>
</div>

Card mit Hover-Effekt

Interaktive Card

Diese Card hat einen Hover-Effekt mit erhöhtem Shadow und Aqua-Border. Ideal für klickbare Elemente. 

<div class="card-aqua cursor-pointer">
  <h4 class="font-heading text-xl font-bold text-navy mb-2">Interaktive Card</h4>
  <p class="font-body text-gray-700">
    Diese Card hat einen Hover-Effekt.
  </p>
</div>

Card mit Brand-Farben

Brand Card

Diese Card verwendet die Navy-Brand-Farbe als Hintergrund mit Aqua-Text für den Titel. 

<div class="bg-navy text-white p-6 rounded-lg">
  <h4 class="font-heading text-xl font-bold text-aqua mb-2">Brand Card</h4>
  <p class="font-body text-gray-300">
    Diese Card verwendet die Navy-Brand-Farbe.
  </p>
</div>

Card Grid

Design

Brand-konformes Design

Performance

Optimierte Ladezeiten

Tools

Moderne Entwicklung 

<div class="grid md:grid-cols-3 gap-6">
  <div class="card-aqua">
    <i class="ti ti-palette text-4xl text-aqua-700 mb-4 block text-center"></i>
    <h4 class="font-heading text-lg font-bold text-navy mb-2 text-center">Design</h4>
    <p class="font-body text-gray-600 text-center text-sm">Brand-konformes Design</p>
  </div>
  <!-- Weitere Cards -->
</div>