発行:
Tailwind CSS よく使うクラス集
開発中に「あれ、これどう書くんだっけ？」となった時に役立つ、よく使う Tailwind クラスをまとめました。
これらは React や Next.js に限らず、Tailwind CSS を採用しているプロジェクトであればどこでも使えます。
1. 基本チートシート
とりあえずこれだけ覚えておけば、というものを集めました。
レイアウト (Flex & Grid)
{/* Flexbox: 横並び・中央配置の鉄板 */} <div className="flex items-center justify-center gap-4"> <div>Item 1</div> <div>Item 2</div> </div> {/* Grid: 繰り返し要素の鉄板 */} {/* スマホ:1列 / タブレット:2列 / PC:3列 */} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div>Card 1</div> <div>Card 2</div> <div>Card 3</div> </div>
余白・サイズ (Spacing & Sizing)
p-4(padding 1rem),px-4(横だけ),py-2(縦だけ)m-4(margin 1rem),my-auto(縦の自動調節)w-full(幅100%),h-screen(画面の高さ100%),max-w-md(最大幅制限)
文字 (Typography)
text-xl,font-bold(サイズ・太さ)text-center,text-right(配置)text-gray-500(色)truncate(長い文字を...で省略)
2. 状態とレスポンシブ (States & Responsive)
ホバー時やスマホ表示時のスタイル変化は、プレフィックス（:）をつけるだけで実現できます。
<button className=" bg-blue-500 text-white /* 通常時 */ hover:bg-blue-600 /* ホバー時 */ active:bg-blue-700 /* クリック時 */ focus:ring-2 focus:ring-blue-400 /* フォーカス時(Tab移動など) */ disabled:bg-gray-400 disabled:cursor-not-allowed /* 無効化時 */ dark:bg-blue-900 /* ダークモード時 */ md:text-lg /* 画面幅768px以上(Tablet/PC) */ "> レスポンシブボタン </button>
3. アニメーション・遷移 (Transition)
Tailwindなら、CSSを書かずに心地よいアニメーションを追加できます。
{/* transition-colors: 色の変化を滑らかにする */} {/* duration-200: 0.2秒かけて変化する */} <button className="bg-red-500 hover:bg-red-600 transition-colors duration-200 text-white p-2 rounded"> 滑らかなボタン </button> {/* animate-bounce: 跳ねるアニメーション */} <div className="animate-bounce">↓</div> {/* animate-spin: 回転（ローディングなど） */} <div className="animate-spin h-5 w-5 border-4 border-blue-500 border-t-transparent rounded-full"></div>
4. 実践コンポーネントレシピ
コピーして使える、よくあるUIパターンの実装例です。
① 万能なカードコンポーネント
画像、タグ、タイトル、本文がある一般的なカードです。
overflow-hidden と rounded-xl の組み合わせがポイントです。
<div className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow duration-300"> {/* 画像エリア */} <div className="h-48 bg-gray-200 w-full object-cover"> {/* <img src="..." alt="..." className="w-full h-full object-cover" /> */} </div> {/* コンテンツエリア */} <div className="p-5"> <div className="text-xs font-bold text-blue-500 uppercase tracking-wide mb-1"> Category </div> <h3 className="text-lg font-bold text-gray-900 mb-2"> 魅力的なカードタイトル </h3> <p className="text-gray-600 text-sm leading-relaxed mb-4"> ここに記事の抜粋や説明文が入ります。テキストはtext-gray-600くらいが読みやすくておすすめです。 </p> <button className="text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors"> Read more → </button> </div> </div>
② フォーム入力要素
ラベル、入力欄、ヘルプテキストのセットです。
focus:ring を使うと、選択時にカッコいい枠線が表示されます。
<div className="max-w-sm"> <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1"> メールアドレス </label> <input type="email" id="email" className=" w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-400 transition-shadow " placeholder="[email protected]" /> <p className="mt-1 text-sm text-gray-500"> 確認メールをお送りします。 </p> </div>
③ 追従するヘッダー (Sticky Header)
スクロールしても画面上部に張り付くヘッダーです。
sticky top-0 z-50 が魔法の言葉です。backdrop-blur で磨りガラスのような効果も出せます。
<header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200"> <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between"> <div className="font-bold text-xl text-gray-800">Logo</div> <nav className="flex gap-4 text-sm font-medium text-gray-600"> <a href="#" className="hover:text-blue-600 transition-colors">Home</a> <a href="#" className="hover:text-blue-600 transition-colors">About</a> <a href="#" className="bg-blue-600 text-white px-4 py-2 rounded-full hover:bg-blue-700 transition-colors"> Sign Up </a> </nav> </div> </header>
まとめ
Tailwind CSS は「クラス名を覚える」のではなく「 やりたいこと（右寄せしたい、角を丸くしたい）をクラス名に変換する 」感覚で使うとスムーズです。
慣れてくると、通常の CSS を書くよりも圧倒的に速くコンポーネントを作れるようになります。ぜひ上記のレシピを改造して遊んでみてください。