tailwindcss

Tailwind CSS — ユーティリティファーストのスタイリングスキル

使用する場面

• 一貫したスペーシング／タイポグラフィのスケールで、UIをすばやく構築する場合
• 独自のCSSよりもコンポジションを重視するデザインシステム
• コンポーネント駆動型アプリ（React/Vue/Svelte）、マーケティングページ、プロトタイプから本番環境まで

主な概念とパターン

• HTML/JSXでユーティリティを組み合わせます：class="flex gap-4 p-6 bg-zinc-950 text-white"
• レスポンシブバリアント：sm: md: lg: xl: など
• 状態バリアント：hover:、focus:、active:、disabled:、group-hover:、peer-checked:
• 任意の値（控えめに使用）：w-[42rem]、bg-[#0b1220]、translate-y-[3px]
• ダークモードのパターン：クラスベースの戦略で dark: を使用
• 繰り返し使うパターンの抽出：
  • まずコンポーネント（JSX/Vueコンポーネント）を優先します
  • 次に、小規模な再利用可能パターンに @apply を使用します（使いすぎないでください）
• ビルドパイプライン：
  • Tailwindは「content」ファイルをスキャンしてクラス名を検出し、CSSを生成します（ランタイム不要）

よくある問題

• 本番環境でクラスが生成されない
  • contentパスにすべてのテンプレート／コンポーネントが含まれていることを確認します。
  • セーフリストに登録しない限り、クラス名を動的に組み立てる（例：「"text-" + color」）のは避けます。
• @apply を使いすぎて、ユーティリティファーストの利点が失われる
• クラスの順序に関する思い込みが原因でスタイルが競合する
• 構造化されていない長大なHTMLクラスリスト
  • コンポーネントを組み合わせ、サブコンポーネントに分割します。必要に応じて clsx/cva を使用します。

すぐに使えるレシピ

1) シンプルなCTAボタン

<button class="inline-flex items-center justify-center rounded-xl px-5 py-3
               bg-indigo-600 text-white font-medium
               hover:bg-indigo-500 active:bg-indigo-700
               focus:outline-none focus:ring-2 focus:ring-indigo-400/60">
  Get started
</button>

2) レスポンシブなヒーローレイアウト

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="grid gap-10 lg:grid-cols-2 lg:items-center">
    <div>
      <h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">
        Ship a beautiful site fast.
      </h1>
      <p class="mt-4 text-zinc-600">
        Tailwind helps you move quickly without fighting CSS.
      </p>
    </div>
    <div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
      
    </div>
  </div>
</section>

3) 動的なクラス名を安全に扱う

マッピングを優先します：

const toneClass = {
  success: "bg-emerald-600",
  danger: "bg-rose-600",
  info: "bg-sky-600",
}[tone];

ユーザーに確認すること

• フレームワーク／ビルドツール（Next/Vite/Remix/Webflowのエクスポート）？
• デザインシステム（トークン、コンポーネントライブラリ）が必要ですか、それとも単発のページですか？
• ダークモード？RTL？アクセシビリティ上の制約？