よく使う CSS プロパティと対応する Tailwind クラスを並べて比較。
1次元のレイアウト。横並び・縦並び・整列に使う
横並び（中央揃え）
display: flex;
align-items: center;
justify-content: center;flex items-center justify-center横並び（両端揃え）
display: flex;
align-items: center;
justify-content: space-between;flex items-center justify-between縦並び
display: flex;
flex-direction: column;
gap: 16px;flex flex-col gap-4折り返し
display: flex;
flex-wrap: wrap;
gap: 8px;flex flex-wrap gap-2余白を埋める（flex-grow）
flex: 1 1 0%;flex-1縮まない（flex-shrink-0）
flex-shrink: 0;shrink-0ギャップ
gap: 16px;gap-42次元のレイアウト。カードグリッド・複雑なレイアウトに使う
3カラムグリッド
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;grid grid-cols-3 gap-4レスポンシブグリッド
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4カラムスパン
grid-column: span 2 / span 2;col-span-2サブグリッド
grid-template-columns: subgrid;（Tailwind v4でサポート）アイテムを中央に
display: grid;
place-items: center;grid place-items-centermargin・padding・width・heightの基本
padding（全方向）
padding: 16px;p-4padding（縦横別）
padding: 8px 16px;py-2 px-4margin（中央寄せ）
margin: 0 auto;mx-auto幅100%
width: 100%;w-full最大幅
max-width: 768px;max-w-3xlmin-height画面全体
min-height: 100vh;min-h-screenaspect-ratio
aspect-ratio: 16 / 9;aspect-videoフォント・テキストスタイル
フォントサイズ
font-size: 1.5rem; /* 24px */text-2xl太字
font-weight: 700;font-bold行高
line-height: 1.625;leading-relaxed中央揃え
text-align: center;text-center省略（truncate）
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;truncate複数行省略
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;line-clamp-2等幅フォント
font-family: ui-monospace, monospace;font-mono色・背景・透明度
テキストカラー
color: rgb(79 70 229);text-indigo-600背景色
background-color: rgb(238 242 255);bg-indigo-50透明度
opacity: 0.5;opacity-50背景透明度
background-color: rgb(79 70 229 / 0.1);bg-indigo-600/10グラデーション
background: linear-gradient(to right, #6366f1, #8b5cf6);bg-gradient-to-r from-indigo-500 to-purple-600ダークモード
/* dark: プレフィックス */
@media (prefers-color-scheme: dark) {}dark:bg-zinc-900 dark:text-white枠線・角丸・影のスタイル
ボーダー
border: 1px solid rgb(228 228 231);border border-zinc-200角丸
border-radius: 0.75rem;rounded-xl完全な円
border-radius: 9999px;rounded-full影
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);shadow-mdリング（アウトライン）
box-shadow: 0 0 0 2px #6366f1;ring-2 ring-indigo-500アウトラインなし（input）
outline: none;outline-none位置指定・重なり順
固定ヘッダー
position: sticky;
top: 0;
z-index: 10;sticky top-0 z-10モーダルオーバーレイ
position: fixed;
inset: 0;
z-index: 50;fixed inset-0 z-50絶対位置（中央）
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2相対位置の親
position: relative;relativeはみ出し非表示
overflow: hidden;overflow-hiddenスクロール
overflow-y: auto;overflow-y-autoTailwindのブレークポイント（モバイルファースト）
sm: 640px以上
@media (min-width: 640px) {}sm:flex sm:text-lgmd: 768px以上
@media (min-width: 768px) {}md:grid-cols-2lg: 1024px以上
@media (min-width: 1024px) {}lg:w-64 lg:ml-64xl: 1280px以上
@media (min-width: 1280px) {}xl:grid-cols-4モバイルで非表示
@media (max-width: 1023px) { display: none; }hidden lg:blockデスクトップで非表示
@media (min-width: 1024px) { display: none; }lg:hiddenCSSアニメーションとTailwindクラス
トランジション（全プロパティ）
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);transition-allホバー時に色変更
&:hover { background-color: rgb(79 70 229); }hover:bg-indigo-600ホバー時にスケール
&:hover { transform: scale(1.05); }hover:scale-105 transition-transformスピナー
animation: spin 1s linear infinite;animate-spinフェード（pulse）
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;animate-pulsebounce
animation: bounce 1s infinite;animate-bounceTailwindならではの便利なユーティリティ
グループホバー
親にgroupを付けると、子でgroup-hover:を使える
.group:hover .child {}group / group-hover:opacity-100ピアセレクター
兄弟要素の状態に応じてスタイルを変える
input:checked ~ .label {}peer / peer-checked:block任意の値
Tailwindにない値はブラケットで指定
margin-top: 13px;mt-[13px]@containerクエリ
ビューポートではなく親要素のサイズで変化
@container (min-width: 400px) {}@container @md:flex-row動的クラス（注意）
Tailwindは静的解析でクラスを検出するため、動的生成はNG
/* NG: 文字列結合 */// NG: "text-" + color
// OK: "text-red-500" を完全な文字列で指定