如何Streamline CSS Styling：Claude Code 实战指南

CSSスタイリングでClaude Code 活躍する場面

デザインカンプからのCSS实现、响应式支持、ダークモード支持など、スタイリング作業は手間がかかります。Claude Code デザインの意図を理解し、高效地样式を生成可以。

Tailwind CSS组件の生成

> Tailwind CSSで以下カード组件创建：
> - 图片、标题、説明文、タグ、发布日
> - 悬停で影が強くなる动画
> - ダークモード支持
> - モバイル响应式

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('en-US')}
        </time>
      </div>
    </article>
  );
}

CSS动画の生成

> ローディングスピナーをCSS动画で创建して。
> Tailwindのユーティリティとカスタム动画を組み合わせて。

/* 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>
  );
}

既存样式の重构

> src/styles/ 配下のCSS文件を分析して、
> 重複している样式を共通化して。
> 使われていないCSS类を特定してDeleteして。

Claude Code 项目全体のCSSを分析し、重複パターンの集成や不要类の除去を提案します。

响应式デザインの一括支持

> 全页面组件の响应式支持をチェックして。
> 320px〜1440pxまで問題ないか确认して、修正が必要な箇所を直して。

// 响应式な网格布局の例
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>
  );
}

ダークモードの实现

> 项目全体にダークモード添加。
> システム配置に追従し、用户が手動で切换られるようにして。

// 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 };
}

总结

Claude Codeを活用すれば、组件のスタイリングから响应式支持、ダークモード实现まで、CSSに関わる作業を大幅に效率化可以。デザインの要件を具体地プロンプトで伝えることがコツです。有效的プロンプトの書き方はプロンプトテクニック完全指南。スタイリングの規約はCLAUDE.mdに記述しておくと一貫性を保てます。

详情请参阅Anthropic官方文档やTailwind CSS官方网站。