Claude CodeでTailwind CSSを120%活用する実践テクニック

Tailwind CSS と Claude Code

Tailwind CSSはユーティリティファーストのCSSフレームワークです。Claude Codeと組み合わせれば、デザインの意図を自然言語で伝えてUIを素早く構築できます。

カスタムテーマ設定

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#eff6ff",
          100: "#dbeafe",
          200: "#bfdbfe",
          300: "#93c5fd",
          400: "#60a5fa",
          500: "#3b82f6",
          600: "#2563eb",
          700: "#1d4ed8",
          800: "#1e40af",
          900: "#1e3a8a",
        },
      },
      fontFamily: {
        sans: ["Inter", "Noto Sans JP", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
      },
      spacing: {
        18: "4.5rem",
        88: "22rem",
      },
      animation: {
        "fade-in": "fadeIn 0.5s ease-in-out",
        "slide-up": "slideUp 0.3s ease-out",
        "pulse-slow": "pulse 3s infinite",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
        slideUp: {
          "0%": { transform: "translateY(10px)", opacity: "0" },
          "100%": { transform: "translateY(0)", opacity: "1" },
        },
      },
    },
  },
  plugins: [],
};

export default config;

レスポンシブカードコンポーネント

function ProductCard({
  product,
}: {
  product: { name: string; price: number; image: string; badge?: string };
}) {
  return (
    <div className="group relative overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-lg hover:-translate-y-1">
      {/* バッジ */}
      {product.badge && (
        <span className="absolute top-3 right-3 z-10 rounded-full bg-brand-500 px-3 py-1 text-xs font-semibold text-white">
          {product.badge}
        </span>
      )}

      {/* 画像 */}
      <div className="aspect-square overflow-hidden">
        <img
          src={product.image}
          alt={product.name}
          className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
        />
      </div>

      {/* コンテンツ */}
      <div className="p-4 sm:p-6">
        <h3 className="text-lg font-semibold text-gray-900 line-clamp-2">
          {product.name}
        </h3>
        <p className="mt-2 text-2xl font-bold text-brand-600">
          ¥{product.price.toLocaleString()}
        </p>
        <button className="mt-4 w-full rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-brand-600 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2">
          カートに追加
        </button>
      </div>
    </div>
  );
}

グリッドレイアウトパターン

function ProductGrid({ products }: { products: Product[] }) {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:grid-cols-4">
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

ダークモード対応

function ThemeToggle() {
  return (
    <div className="bg-white dark:bg-gray-900 min-h-screen transition-colors">
      <header className="border-b border-gray-200 dark:border-gray-700 px-6 py-4">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
          マイアプリ
        </h1>
      </header>

      <main className="p-6">
        <div className="rounded-lg bg-gray-50 dark:bg-gray-800 p-6">
          <p className="text-gray-700 dark:text-gray-300">
            ダークモードにも対応しています。
          </p>
        </div>
      </main>
    </div>
  );
}

@apply でクラスの共通化

/* globals.css */
@layer components {
  .btn-primary {
    @apply rounded-lg bg-brand-500 px-4 py-2 text-sm font-medium text-white
      transition-colors hover:bg-brand-600 focus:outline-none
      focus:ring-2 focus:ring-brand-500 focus:ring-offset-2;
  }

  .btn-secondary {
    @apply rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm
      font-medium text-gray-700 transition-colors hover:bg-gray-50
      focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2;
  }

  .input-field {
    @apply w-full rounded-lg border border-gray-300 px-4 py-2 text-sm
      placeholder:text-gray-400 focus:border-brand-500 focus:outline-none
      focus:ring-1 focus:ring-brand-500;
  }
}

アニメーション実装

function NotificationToast({ message }: { message: string }) {
  return (
    <div className="animate-slide-up fixed bottom-4 right-4 flex items-center gap-3 rounded-lg bg-gray-900 px-4 py-3 text-white shadow-lg">
      <svg className="h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
        <path
          fillRule="evenodd"
          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
          clipRule="evenodd"
        />
      </svg>
      <span className="text-sm">{message}</span>
    </div>
  );
}

Claude Codeでの効率的なプロンプト

Tailwind CSSのUI実装をClaude Codeに依頼する例です。効率的なプロンプトの書き方は効果的なプロンプト5つのTips、レスポンシブ設計はPWA開発も参照してください。

このデザインをTailwind CSSで実装して。
- レスポンシブ対応（モバイルファースト）
- ダークモード対応
- ホバーとフォーカスのインタラクション
- アクセシビリティ（aria属性、フォーカス管理）

Tailwind CSSの公式リファレンスはTailwind CSS Docsを参照してください。Claude Codeの活用法は公式ドキュメントで確認できます。

まとめ

Tailwind CSSとClaude Codeの組み合わせは非常に強力です。デザインの意図を自然言語で伝えるだけで、レスポンシブ対応やダークモードを含むモダンなUIを素早く構築できます。