Tailwind CSS の速い UI 開発のためのヒントとコツ

Designer working on UI components

Tailwind CSS は、開発者がスタイルを記述する方法を根本的に変えました。HTML ファイルと CSS ファイルを行き来してクラス名を考える代わりに、ユーティリティクラスをマークアップに直接組み合わせます。その結果、イテレーションが速くなり、本番環境で使われない CSS はゼロになり、パターンを把握していれば一貫したデザインシステムを実現できます。

ユーティリティファーストの考え方

ヒントに入る前に、核となる哲学を理解しましょう。すべてのクラスは一つのことだけを行うということです。以下のように書く代わりに：

.card {
  background-color: white;
  border-radius: 8px;
  padding: 16px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

このように書きます：

<div class="bg-white rounded-lg px-6 py-4 shadow-sm">

スタイルは構造のすぐそばに存在します。コンテキストの切り替えも、クラス名の議論も不要です。

レスポンシブデザイン：モバイルファーストのブレークポイント

Tailwind はモバイルファーストのアプローチを採用しています。プレフィックスなしのユーティリティはすべての画面サイズに適用され、プレフィックス付きのユーティリティはそのブレークポイント以上で上書きされます：

<!-- モバイルでは全幅、中サイズで半幅、大サイズで3分の1 -->
<div class="w-full md:w-1/2 lg:w-1/3">

<!-- モバイルでは縦に積み重ね、中サイズ以上では横並び -->
<div class="flex flex-col md:flex-row gap-4">

<!-- モバイルでは非表示、大サイズ以上で表示 -->
<aside class="hidden lg:block">

デフォルトのブレークポイント：

プレフィックス	最小幅
`sm:`	640px
`md:`	768px
`lg:`	1024px
`xl:`	1280px
`2xl:`	1536px

ダークモード

tailwind.config.ts でダークモードを有効にします：

export default {
  darkMode: "class", // または "media"
  // ...
}

"class" モードでは、ユーザーがダークモードを切り替えたときに <html> に dark クラスを追加します。"media" モードでは、OS の設定に自動的に従います。

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-2xl font-bold">Hello World</h1>
  <p class="text-gray-600 dark:text-gray-400">補足テキスト</p>
</div>

`@apply` を使ったコンポーネントの抽出

パターンが繰り返される場合は抽出しましょう — ただし、使い過ぎには注意：

/* globals.css */
@layer components {
  .btn-primary {
    @apply inline-flex items-center px-4 py-2 rounded-md
           bg-blue-600 text-white font-medium text-sm
           hover:bg-blue-700 focus:outline-none focus:ring-2
           focus:ring-blue-500 focus:ring-offset-2
           transition-colors duration-150;
  }
}

@apply は多くの場所で再利用する UI コンポーネントにのみ使用してください。一度限りのスタイルにはユーティリティをインラインのまま使いましょう。@apply を使いすぎると、Tailwind が解決しようとした問題を再び生み出すことになります。

カスタムデザイントークン

tailwind.config.ts でデザインシステムを定義します：

export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
        },
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
      },
      spacing: {
        18: "4.5rem",
        88: "22rem",
      },
      borderRadius: {
        "4xl": "2rem",
      },
    },
  },
}

これで text-brand-500、font-mono、mt-18 などが使用でき、VS Code では完全な IntelliSense サポートも受けられます。

既存の CSS を Tailwind に変換する

レガシーなコードベースを移行する場合は、Tailwind Converter を使って CSS を貼り付けるだけで、同等の Tailwind ユーティリティクラスを即座に取得できます。

/* 入力 CSS */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 4rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
}

→ flex items-center justify-between px-16 py-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl

任意の値

デフォルトのスケールにない値が必要な場合は、角括弧を使います：

<!-- 正確なピクセル値 -->
<div class="w-[327px] mt-[13px]">

<!-- 任意のカラー -->
<div class="bg-[#1a2332] text-[#e8f4f8]">

<!-- カスタム CSS 変数 -->
<div class="text-[var(--brand-color)]">

<!-- 複雑なグリッド -->
<div class="grid grid-cols-[1fr_2fr_1fr]">

使いすぎには注意しましょう — 同じ任意の値を複数箇所で使う場合は、設定ファイルに追加してください。

状態バリアント

Tailwind には必要なすべての状態バリアントが含まれています：

<!-- ホバー、フォーカス、アクティブ -->
<button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 focus:ring-2">

<!-- フォームの状態 -->
<input class="border-gray-300 focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">

<!-- グループホバー（親が子を制御） -->
<div class="group">
  <h3 class="text-gray-900 group-hover:text-blue-600">タイトル</h3>
  <p class="hidden group-hover:block">親がホバーされるまで非表示</p>
</div>

<!-- ピア（兄弟要素の状態） -->
<input type="checkbox" class="peer">
<label class="hidden peer-checked:block">チェック済み！</label>

パフォーマンス：未使用スタイルのパージ

Tailwind の JIT（Just-In-Time）コンパイラはテンプレートファイルをスキャンし、実際に使用している CSS クラスのみを生成します。本番バンドルは通常 5〜15 KB の CSS になります。

tailwind.config.ts の content パスがすべてのテンプレートファイルをカバーしていることを確認してください：

export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./content/**/*.mdx",
  ],
  // ...
}

クラス名を動的に構築する場合（例：`bg-${color}-500`）、Tailwind はそれを検出できません。代わりにセーフリストを使用するか、完全なクラス文字列を使用してください：

// ❌ 動的 — Tailwind は "bg-red-500" を検出できない
const cls = `bg-${color}-500`;

// ✅ 完全なクラス文字列 — 検出可能
const colorMap = { red: "bg-red-500", blue: "bg-blue-500" };

Typography プラグイン

@tailwindcss/typography プラグインは、任意の HTML コンテンツを美しくスタイリングする prose クラスを追加します — ブログ記事、ドキュメント、Markdown の出力に最適です：

<article class="prose prose-lg dark:prose-invert max-w-none">
  <!-- Markdown でレンダリングされた HTML をここに -->
</article>

見出し、リスト、ブロック引用、コードブロック、テーブルなどを適切なデフォルト値でスタイリングします。

すぐに使えるチェックリスト

子要素にマージンを付ける代わりに、flex/grid コンテナに gap-* を使用する
兄弟要素間にスペースを追加するには space-x-* と space-y-* を使用する
余分なマークアップなしに子要素間にボーダーを付けるには divide-* を使用する
フォーカスリングには ring-* を使用する（カスタムスタイルには outline-* より優れている）
省略記号付きの一行オーバーフローには truncate を使用する
複数行のクランプには line-clamp-3 を使用する（typography プラグインが必要）
アクセシビリティラベルを視覚的に非表示にするには sr-only を使用する

Tailwind は投資に見合うツールです。ユーティリティの語彙に慣れれば慣れるほど、洗練された一貫性のある UI をより速く構築できるようになります。