Tailwind CSS dengan Claude Code

Tailwind CSS と Claude Code

Tailwind CSS utilitasファースト CSSframework.Claude Code dan 組み合わせれば、デザイン 意図 自然言語 伝えてUI 素早くpembangunan bisa dilakukan.

カスタムtemapengaturan

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

レスポンシブカードkomponen

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

gridlayoutpola

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

Dukungan Dark Mode

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 でclass

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

animasiimplementasi

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

のefisienなプロンプト dengan Claude Code

Tailwind CSS UIimplementasi Claude Code 依頼 例.efisienなプロンプト 書き方 効果的なプロンプト5つ Tips、レスポンシブ設計 PWApengembangan juga bisa dijadikan referensi.

こ デザイン Tailwind CSS dengan implementasiして。
- レスポンシブdukungan（mobileファースト）
- ダークモードdukungan
- ホバー dan フォーカス インタラクション
- アクセシビリティ（ariaatribut、フォーカスmanajemen）

Tailwind CSS 公式referensi Tailwind CSS Docs silakan lihat.Claude Code pemanfaatan法 公式dokumen konfirmasi bisa dilakukan.

Summary

Tailwind CSS dan Claude Code 組み合わせ 非常 強力.デザイン 意図 自然言語 伝えるだけ 、レスポンシブdukunganやダークモード 含むモダンなUI 素早くpembangunan bisa dilakukan.