Tailwind CSS のヒントとコツ

このドキュメントは継続的に更新されます。

レスポンシブデザインのヒント

モバイルファーストアプローチ

Tailwind CSS はモバイルファーストアプローチを採用しています。常に最小画面から設計を始めます：

<!-- モバイル：全幅、タブレット：半分幅、デスクトップ：三分の一幅 -->
<div class="w-full md:w-1/2 lg:w-1/3">
  コンテンツ
</div>

要素の非表示/表示

<!-- モバイルで非表示、デスクトップで表示 -->
<div class="hidden lg:block">
  デスクトップコンテンツ
</div>

<!-- モバイルで表示、デスクトップで非表示 -->
<div class="block lg:hidden">
  モバイルコンテンツ
</div>

レイアウトのヒント

完璧な中央揃え

<!-- 水平および垂直中央揃え -->
<div class="flex items-center justify-center min-h-screen">
  <div>中央揃えコンテンツ</div>
</div>

<!-- Grid を使用した中央揃え -->
<div class="grid place-items-center min-h-screen">
  <div>中央揃えコンテンツ</div>
</div>

スティッキーフッター

<div class="min-h-screen flex flex-col">
  <header class="bg-blue-500 p-4">ヘッダー</header>
  <main class="flex-1 p-4">メインコンテンツ</main>
  <footer class="bg-gray-800 text-white p-4">フッター</footer>
</div>

カードグリッド

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-lg shadow-md p-6">カード 1</div>
  <div class="bg-white rounded-lg shadow-md p-6">カード 2</div>
  <div class="bg-white rounded-lg shadow-md p-6">カード 3</div>
</div>

コンポーネントスタイル

ボタンバリエーション

<!-- プライマリボタン -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  プライマリボタン
</button>

<!-- セカンダリボタン -->
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
  セカンダリボタン
</button>

<!-- 危険ボタン -->
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
  削除
</button>

入力フィールドスタイル

<!-- 基本入力フィールド -->
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="ユーザー名">

<!-- アイコン付き入力フィールド -->
<div class="relative">
  <input class="pl-10 pr-4 py-2 border rounded-lg w-full" type="text" placeholder="検索...">
  <div class="absolute inset-y-0 left-0 pl-3 flex items-center">
    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
    </svg>
  </div>
</div>

ユーティリティ

テキストの切り詰め

<!-- 単行切り詰め -->
<p class="truncate">これは長いテキストで、切り詰められます...</p>

<!-- 複数行切り詰め（カスタム CSS が必要） -->
<p class="line-clamp-3">これは長いテキストで、3行後に切り詰められます...</p>

グラデーション背景

<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  グラデーション背景
</div>

<div class="bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500">
  多色グラデーション
</div>

シャドウエフェクト

<!-- 異なるレベルのシャドウ -->
<div class="shadow-sm">小さいシャドウ</div>
<div class="shadow">デフォルトシャドウ</div>
<div class="shadow-lg">大きいシャドウ</div>
<div class="shadow-xl">超大シャドウ</div>
<div class="shadow-2xl">最大シャドウ</div>

<!-- カラーシャドウ -->
<div class="shadow-lg shadow-blue-500/50">ブルーシャドウ</div>

アニメーションとトランジション

ホバーエフェクト

<button class="transform hover:scale-105 transition duration-300 ease-in-out">
  ホバーで拡大
</button>

<div class="hover:shadow-lg transition-shadow duration-300">
  ホバーシャドウ
</div>

ローディングアニメーション

<!-- スピンアニメーション -->
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>

<!-- パルスアニメーション -->
<div class="animate-pulse bg-gray-300 h-4 rounded"></div>

<!-- バウンスアニメーション -->
<div class="animate-bounce bg-blue-500 h-6 w-6 rounded-full"></div>

ダークモード

基本的なダークモード

<!-- HTML タグに dark クラスを追加 -->
<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  ダークモード対応コンテンツ
</div>

ダークモードの切り替え

// ダークモード切り替えの JavaScript
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
}

パフォーマンス最適化

未使用スタイルのパージ

tailwind.config.js でパージ設定：

module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './public/index.html',
  ],
  // ...
}

カスタムユーティリティクラス

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      }
    }
  }
}

デバッグのヒント

ボーダーデバッグ

<!-- レイアウトデバッグのために素早くボーダーを追加 -->
<div class="border border-red-500">
  デバッグコンテナ
</div>

背景色デバッグ

<!-- 異なる背景色を使用してレイアウトを可視化 -->
<div class="bg-red-100">
  <div class="bg-blue-100">
    <div class="bg-green-100">
      ネストされたコンテナ
    </div>
  </div>
</div>

一般的なパターン

カードコンポーネント

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="image.jpg" alt="画像">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">タイトル</div>
    <p class="text-gray-700 text-base">
      説明テキスト...
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#タグ</span>
  </div>
</div>

ナビゲーションバー

<nav class="bg-blue-500 p-6">
  <div class="flex items-center justify-between">
    <div class="flex items-center flex-shrink-0 text-white mr-6">
      <span class="font-semibold text-xl tracking-tight">ブランド</span>
    </div>
    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border rounded text-blue-200 border-blue-400 hover:text-white hover:border-white">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20">
          <title>メニュー</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
        </svg>
      </button>
    </div>
  </div>
</nav>

これらのヒントは、Tailwind CSS をより効果的に使用するのに役立つはずです。練習がこれらのテクニックをマスターする最良の方法であることを忘れないでください！