CSS-Styling mit Claude Code optimieren

Einsatzbereiche von Claude Code beim CSS-Styling

CSS-Implementierung aus Designvorlagen, Responsive Design, Dark-Mode-Unterstützung - Styling-Aufgaben sind zeitaufwendig. Claude Code versteht die Design-Absicht und kann Styles effizient generieren.

Tailwind CSS-Komponenten generieren

> Erstelle eine Kartenkomponente mit Tailwind CSS:
> - Bild, Titel, Beschreibung, Tags, Veröffentlichungsdatum
> - Hover-Animation mit stärkerem Schatten
> - Dark-Mode-Unterstützung
> - Mobil-responsiv

function BlogCard({ post }: { post: Post }) {
  return (
    <article className="group rounded-xl overflow-hidden border border-gray-200
      bg-white shadow-sm transition-shadow duration-300 hover:shadow-lg
      dark:border-gray-700 dark:bg-gray-800">

      <div className="aspect-video overflow-hidden">
        <img
          src={post.image}
          alt={post.title}
          className="h-full w-full object-cover transition-transform
            duration-300 group-hover:scale-105"
        />
      </div>

      <div className="p-4 sm:p-6">
        <div className="mb-2 flex flex-wrap gap-2">
          {post.tags.map(tag => (
            <span key={tag} className="rounded-full bg-blue-100 px-2.5 py-0.5
              text-xs font-medium text-blue-800
              dark:bg-blue-900 dark:text-blue-200">
              {tag}
            </span>
          ))}
        </div>

        <h2 className="mb-2 text-lg font-bold text-gray-900
          line-clamp-2 dark:text-white sm:text-xl">
          {post.title}
        </h2>

        <p className="mb-4 text-sm text-gray-600 line-clamp-3
          dark:text-gray-300">
          {post.description}
        </p>

        <time className="text-xs text-gray-500 dark:text-gray-400">
          {new Date(post.date).toLocaleDateString('de-DE')}
        </time>
      </div>
    </article>
  );
}

CSS-Animationen generieren

> Erstelle einen Ladespinner mit CSS-Animation.
> Kombiniere Tailwind-Utilities mit benutzerdefinierten Animationen.

/* Benutzerdefinierte Animationen für tailwind.config.js */
@layer utilities {
  @keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
  }

  .animate-spinner {
    animation: spinner 1s linear infinite;
  }

  .animate-pulse-ring {
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
}

function LoadingSpinner({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) {
  const sizeClasses = {
    sm: 'h-5 w-5 border-2',
    md: 'h-8 w-8 border-3',
    lg: 'h-12 w-12 border-4',
  };

  return (
    <div className="flex items-center justify-center">
      <div className={`${sizeClasses[size]} animate-spinner rounded-full
        border-gray-300 border-t-blue-600
        dark:border-gray-600 dark:border-t-blue-400`}
      />
    </div>
  );
}

Refactoring bestehender Styles

> Analysiere die CSS-Dateien unter src/styles/,
> konsolidiere duplizierte Styles.
> Identifiziere ungenutzte CSS-Klassen und entferne sie.

Claude Code analysiert das gesamte Projekt-CSS und schlägt die Konsolidierung duplizierter Muster und die Entfernung ungenutzter Klassen vor.

Responsive Design auf einen Schlag

> Überprüfe die Responsive-Anpassung aller Seitenkomponenten.
> Stelle sicher, dass 320px bis 1440px problemlos funktioniert und behebe nötige Stellen.

// Beispiel für ein responsives Grid-Layout
function ProductGrid({ products }: { products: Product[] }) {
  return (
    <div className="grid grid-cols-1 gap-4
      sm:grid-cols-2 sm:gap-6
      lg:grid-cols-3
      xl:grid-cols-4 xl:gap-8">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Dark-Mode implementieren

> Füge dem gesamten Projekt einen Dark Mode hinzu.
> Systemeinstellungen folgen und manuelle Umschaltung durch den Benutzer ermöglichen.

// hooks/useTheme.ts
import { useEffect, useState } from 'react';

type Theme = 'light' | 'dark' | 'system';

export function useTheme() {
  const [theme, setTheme] = useState<Theme>(() => {
    return (localStorage.getItem('theme') as Theme) || 'system';
  });

  useEffect(() => {
    const root = document.documentElement;
    const systemDark = window.matchMedia('(prefers-color-scheme: dark)');

    function applyTheme() {
      const isDark = theme === 'dark' ||
        (theme === 'system' && systemDark.matches);
      root.classList.toggle('dark', isDark);
    }

    applyTheme();
    systemDark.addEventListener('change', applyTheme);
    localStorage.setItem('theme', theme);

    return () => systemDark.removeEventListener('change', applyTheme);
  }, [theme]);

  return { theme, setTheme };
}

Zusammenfassung

Mit Claude Code können Sie von Komponenten-Styling über Responsive Design bis hin zur Dark-Mode-Implementierung alle CSS-bezogenen Aufgaben erheblich effizienter gestalten. Der Schlüssel liegt darin, die Design-Anforderungen konkret im Prompt zu formulieren. Tipps zum effektiven Prompt-Schreiben finden Sie im vollständigen Leitfaden zu Prompt-Techniken. Styling-Konventionen in CLAUDE.md festzuhalten hilft bei der Konsistenz.

Weitere Details finden Sie in der offiziellen Anthropic-Dokumentation und auf der offiziellen Tailwind CSS-Website.