Tailwind CSSのコンポーネント設計パターン集：再利用しやすいUIの作り方

type BadgeVariant = "success" | "warning" | "error" | "info" | "neutral";

// 各バリアントの完全なクラスセットを定義
const variantClasses: Record<BadgeVariant, string> = {
  success: "bg-green-100 text-green-700 border-green-200",
  warning: "bg-yellow-100 text-yellow-700 border-yellow-200",
  error:   "bg-red-100 text-red-700 border-red-200",
  info:    "bg-blue-100 text-blue-700 border-blue-200",
  neutral: "bg-slate-100 text-slate-700 border-slate-200",
};

const dotColor: Record<BadgeVariant, string> = {
  success: "bg-green-500",
  warning: "bg-yellow-500",
  error:   "bg-red-500",
  info:    "bg-blue-500",
  neutral: "bg-slate-500",
};

interface BadgeProps {
  variant:  BadgeVariant;
  label:    string;
  dot?:     boolean;
}

export function Badge({ variant, label, dot = true }: BadgeProps) {
  return (
    <span className={`
      inline-flex items-center gap-1.5 rounded-full
      px-2.5 py-0.5 text-xs font-semibold border
      ${variantClasses[variant]}
    `}>
      {dot && (
        <span className={`w-1.5 h-1.5 rounded-full ${dotColor[variant]}`} />
      )}
      {label}
    </span>
  );
}

// 複合コンポーネントパターン：
// <Card>, <Card.Image>, <Card.Body>, <Card.Footer> をそれぞれ定義し
// 呼び出し元で自由に組み合わせられるようにする

function CardRoot({ children, className = "" }: {
  children: React.ReactNode; className?: string;
}) {
  return (
    <div className={`
      rounded-card overflow-hidden border
      bg-white border-gray-200
      dark:bg-slate-800 dark:border-slate-700
      shadow-card transition-shadow hover:shadow-dropdown
      ${className}
    `}>
      {children}
    </div>
  );
}

function CardImage({ src, alt, fallbackEmoji = "🖼" }: {
  src?: string; alt?: string; fallbackEmoji?: string;
}) {
  if (!src) {
    return (
      <div className="h-40 bg-blue-50 flex items-center justify-center text-4xl">
        {fallbackEmoji}
      </div>
    );
  }
  return <img src={src} alt={alt ?? ""} className="w-full h-40 object-cover" />;
}

function CardBody({ children, className = "" }: {
  children: React.ReactNode; className?: string;
}) {
  return (
    <div className={`p-5 space-y-2 ${className}`}>{children}</div>
  );
}

function CardFooter({ children, className = "" }: {
  children: React.ReactNode; className?: string;
}) {
  return (
    <div className={`
      px-5 py-3 border-t flex items-center justify-between
      border-gray-100 dark:border-slate-700
      text-sm text-gray-500 dark:text-slate-400
      ${className}
    `}>
      {children}
    </div>
  );
}

// Card に子コンポーネントをぶら下げてエクスポート
export const Card = Object.assign(CardRoot, {
  Image:  CardImage,
  Body:   CardBody,
  Footer: CardFooter,
});

import { Card } from "./Card";

function ArticleCard({ post }: { post: Post }) {
  return (
    <Card>
      <Card.Image src={post.thumbnail} alt={post.title} />
      <Card.Body>
        <span className="text-xs font-bold text-blue-600">{post.category}</span>
        <h3 className="font-bold text-gray-900 dark:text-white">{post.title}</h3>
        <p className="text-sm text-gray-500 dark:text-slate-400">{post.excerpt}</p>
      </Card.Body>
      <Card.Footer>
        <span>{post.date}</span>
        <a href={post.url} className="text-blue-500 hover:text-blue-700 font-medium">
          詳細 →
        </a>
      </Card.Footer>
    </Card>
  );
}

import { useId } from "react";

interface FormFieldProps {
  label:       string;
  required?:   boolean;
  error?:      string;   // エラーメッセージ。存在するとエラースタイルに
  hint?:       string;   // 入力補助テキスト
  children:    React.ReactElement<{ id?: string; "aria-describedby"?: string; "aria-invalid"?: boolean }>;
}

export function FormField({ label, required, error, hint, children }: FormFieldProps) {
  const id      = useId();
  const hintId  = `${id}-hint`;
  const errorId = `${id}-error`;

  return (
    <div className="flex flex-col gap-1.5">

      {/* ラベル */}
      <label htmlFor={id} className="text-sm font-semibold text-gray-800 dark:text-slate-200">
        {label}
        {required && <span className="text-red-500 ml-0.5" aria-hidden>*</span>}
      </label>

      {/* input / select などを受け取り、id と aria 属性を自動で渡す */}
      {React.cloneElement(children, {
        id,
        "aria-describedby": error ? errorId : hint ? hintId : undefined,
        "aria-invalid": !!error,
      })}

      {/* ヒント（エラーがないとき表示）*/}
      {hint && !error && (
        <p id={hintId} className="text-xs text-gray-500 dark:text-slate-400">{hint}</p>
      )}

      {/* エラーメッセージ */}
      {error && (
        <p id={errorId} role="alert" className="text-xs text-red-600 dark:text-red-400 font-medium">
          ⚠ {error}
        </p>
      )}
    </div>
  );
}

// 共通スタイルを持つ Input コンポーネント
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  error?: boolean;
}

export function Input({ error, className = "", ...props }: InputProps) {
  return (
    <input
      className={`
        w-full rounded-button px-3 py-2 text-sm
        border bg-white text-gray-900
        placeholder:text-gray-400
        focus-visible:outline-none focus-visible:ring-2
        dark:bg-slate-800 dark:text-slate-100 dark:placeholder:text-slate-500
        transition-colors
        ${error
          ? "border-red-400 focus-visible:ring-red-400 dark:border-red-500"
          : "border-gray-300 focus-visible:ring-blue-500 dark:border-slate-600"
        }
        ${className}
      `}
      {...props}
    />
  );
}

"use client";
import { useState } from "react";

type AlertVariant = "info" | "success" | "warning" | "error";

const variantConfig: Record<AlertVariant, {
  wrapper: string;
  title:   string;
  icon:    string;
}> = {
  info: {
    wrapper: "bg-blue-50 border-blue-200 dark:bg-blue-950/40 dark:border-blue-800",
    title:   "text-blue-800 dark:text-blue-300",
    icon:    "ℹ️",
  },
  success: {
    wrapper: "bg-green-50 border-green-200 dark:bg-green-950/40 dark:border-green-800",
    title:   "text-green-800 dark:text-green-300",
    icon:    "✅",
  },
  warning: {
    wrapper: "bg-yellow-50 border-yellow-200 dark:bg-yellow-950/40 dark:border-yellow-800",
    title:   "text-yellow-800 dark:text-yellow-300",
    icon:    "⚠️",
  },
  error: {
    wrapper: "bg-red-50 border-red-200 dark:bg-red-950/40 dark:border-red-800",
    title:   "text-red-800 dark:text-red-300",
    icon:    "🚫",
  },
};

interface AlertProps {
  variant:     AlertVariant;
  title:       string;
  description?: string;
  closable?:   boolean;
}

export function Alert({ variant, title, description, closable = false }: AlertProps) {
  const [visible, setVisible] = useState(true);
  const cfg = variantConfig[variant];

  if (!visible) return null;

  return (
    <div
      role="alert"
      aria-live="polite"
      className={`
        flex items-start gap-3 rounded-lg border p-4
        ${cfg.wrapper}
      `}
    >
      <span className="text-xl flex-shrink-0 mt-0.5" aria-hidden>{cfg.icon}</span>

      <div className="flex-1 space-y-1">
        <p className={`text-sm font-semibold ${cfg.title}`}>{title}</p>
        {description && (
          <p className="text-sm text-gray-600 dark:text-slate-400">{description}</p>
        )}
      </div>

      {closable && (
        <button
          onClick={() => setVisible(false)}
          className="flex-shrink-0 rounded p-0.5 opacity-60 hover:opacity-100
                     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current"
          aria-label="閉じる"
        >
          ✕
        </button>
      )}
    </div>
  );
}

"use client";
import { useState } from "react";

interface AppLayoutProps {
  children:  React.ReactNode;
  sidebar?:  React.ReactNode;
  title?:    string;
}

export function AppLayout({ children, sidebar, title }: AppLayoutProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    /* ① 全体ラッパー：min-h-screen で縦方向に画面全体を使う */
    <div className="min-h-screen bg-gray-50 dark:bg-slate-950 flex flex-col">

      {/* ② ナビゲーション：sticky で上部に固定 */}
      <header className="
        sticky top-0 z-40 h-header
        bg-white/90 dark:bg-slate-900/90 backdrop-blur-sm
        border-b border-gray-200 dark:border-slate-700
        flex items-center justify-between px-4 md:px-6
      ">
        <span className="font-bold text-blue-600">MyApp</span>
        {/* モバイル：ハンバーガーボタン */}
        <button
          className="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-800"
          onClick={() => setSidebarOpen(o => !o)}
          aria-label="メニューを開く"
        >☰</button>
      </header>

      {/* ③ 本文領域：サイドバー + メインのフレックスレイアウト */}
      <div className="flex flex-1">

        {/* ④ サイドバー：モバイルで非表示 / PC で固定表示 */}
        {sidebar && (
          <>
            {{/* モバイル用オーバーレイ */}}
            {sidebarOpen && (
              <div
                className="fixed inset-0 bg-black/40 z-30 md:hidden"
                onClick={() => setSidebarOpen(false)}
              />
            )}
            <aside className={`
              fixed top-header left-0 bottom-0 z-30
              w-sidebar bg-white dark:bg-slate-900
              border-r border-gray-200 dark:border-slate-700
              overflow-y-auto transition-transform
              md:translate-x-0 md:sticky md:top-header md:h-[calc(100vh-var(--spacing-header))]
              ${sidebarOpen ? "translate-x-0" : "-translate-x-full"}
            `}>
              {sidebar}
            </aside>
          </>
        )}

        {/* ⑤ メインコンテンツ */}
        <main className="flex-1 min-w-0 p-4 md:p-8">
          {title && (
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
              {title}
            </h1>
          )}
          {children}
        </main>
      </div>

      {/* ⑥ フッター */}
      <footer className="border-t border-gray-200 dark:border-slate-800 py-4 px-6
                        text-sm text-gray-500 dark:text-slate-500 text-center">
        © 2025 MyApp
      </footer>

    </div>
  );
}