Tailwind CSSを学び始めた初心者や、クラス名を素早く確認したい開発者のための触って試せるなチートシートです。UIコンポーネント、アニメーション、余白、色設定など、頻繁に使うパーツを視覚的なサンプルとコピペ可能なコピペ用コードでまとめました。ダークモードにも対応しており、実際に触りながら効率よく学習できます。
Tailwind CSS チートシート
この記事はPRを含みます。
UIコンポーネント (UI Components)
カード
カードのタイトル
ここにカードの本文が入ります。これはUIの良いサンプルです。
#タグ1
#タグ2
<div class="rounded overflow-hidden shadow-lg">...</div>アラート
情報: こちらは情報アラートです。
危険: こちらは危険アラートです。
<div class="p-4 text-blue-700 bg-blue-100 rounded-lg">...</div>バッジ
Default
Success
New!
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">...</span>アニメーション (Animation)
トランジション: transition
<button class="transition duration-300 ease-in-out">...</button>ホバーで拡大: hover:scale-105
ホバー
<div class="transition hover:scale-105">...</div>スピン: animate-spin
<svg class="animate-spin h-5 w-5">...</svg>角丸 (Border Radius)
標準の角丸: rounded
<button class="bg-cyan-500 text-white rounded">...</button>少し大きめの角丸: rounded-lg
<button class="bg-cyan-500 text-white rounded-lg">...</button>完全な丸: rounded-full
<button class="bg-cyan-500 text-white rounded-full">...</button>影 (Box Shadow)
標準の影: shadow
適用例
<div class="shadow">...</div>大きめの影: shadow-lg
適用例
<div class="shadow-lg">...</div>マウスホバーで影を濃くする
ホバーしてね
<div class="shadow hover:shadow-xl transition">...</div>余白 (Padding & Margin)
内側の余白 (Padding)
要素の内側のスペース。基本の単位は 0.25rem (4px) です。
p-1
4px
p-2
8px
p-3
12px
p-4
16px
p-5
20px
p-6
24px
p-8
32px
p-10
40px
p-12
48px
p-16
64px
方向別の指定 (Directional Padding)
pt-4 (上)
pr-2 (右)
pb-6 (下)
pl-8 (左)
pr-2 (右)
pb-6 (下)
pl-8 (左)
<!-- t:top, r:right, b:bottom, l:left -->
<div class="pt-4 pr-2 pb-6 pl-8">...</div>
<!-- x:左右, y:上下 -->
<div class="py-4 px-8">...</div>外側の余白 (Margin)
要素の外側のスペース。-m-4のようにマイナス値も指定できます。
m-1
4px
m-2
8px
m-3
12px
m-4
16px
m-5
20px
m-6
24px
m-8
32px
方向別の指定 (Directional Margin)
m-2
ml-8 (左にだけ余白)
mt-4 (上にだけ余白)
<!-- 上にマージン -->
<div class="mt-8">...</div>
<!-- x軸(左右)に自動でマージンを適用(中央寄せ) -->
<div class="mx-auto">...</div>枠線 (Borders)
太さと色: border-4 border-sky-500
適用例
<div class="border-4 border-sky-500">...</div>点線: border-2 border-dashed
適用例
<div class="border-2 border-dashed">...</div>片側だけ: border-b-4
下線
<div class="border-b-4 border-red-500">...</div>テキスト (Typography)
テキストサイズ (Font Size)
text-xs
text-sm
text-base (標準)
text-lg
text-xl
text-2xl
<p class="text-lg">...</p>文字の太さ (Font Weight)
font-light (細い)
font-normal (標準)
font-medium
font-semibold
font-bold (太い)
font-extrabold
<p class="font-bold">...</p>状態変化 (States)
ホバー: hover:bg-blue-600
<button class="bg-blue-500 hover:bg-blue-600">...</button>フォーカス: focus:ring-2
<input class="focus:ring-2 focus:ring-lime-500">Flexbox & Grid
Flexbox (横並び): flex
1
2
3
<div class="flex space-x-2">...</div>Grid (3カラム): grid grid-cols-3
1
2
3
4
5
6
<div class="grid grid-cols-3 gap-2">...</div>レスポンシブデザイン (Responsive)
画面幅に応じてレイアウトを変更
ウィンドウの幅をドラッグして変えてみてください。
Column 1
Column 2
常に表示
Column 3
<!-- スマホでは1列、md(タブレット)以上で3列 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- md以上で表示 -->
<div class="... hidden md:block">1</div>
<div>2</div>
<!-- lg以上で表示 -->
<div class="... hidden lg:block">3</div>
</div>色見本 (Color Palette)
Gray / Slate
50
100
200
300
400
500
600
700
800
900
Red
50
100
200
300
400
500
600
700
800
900
Orange
50
100
200
300
400
500
600
700
800
900
Amber
50
100
200
300
400
500
600
700
800
900
Yellow
50
100
200
300
400
500
600
700
800
900
Lime
50
100
200
300
400
500
600
700
800
900
Green
50
100
200
300
400
500
600
700
800
900
Emerald
50
100
200
300
400
500
600
700
800
900
Teal
50
100
200
300
400
500
600
700
800
900
Cyan
50
100
200
300
400
500
600
700
800
900
Sky
50
100
200
300
400
500
600
700
800
900
Blue
50
100
200
300
400
500
600
700
800
900
Indigo
50
100
200
300
400
500
600
700
800
900
Violet
50
100
200
300
400
500
600
700
800
900
Purple
50
100
200
300
400
500
600
700
800
900
Fuchsia
50
100
200
300
400
500
600
700
800
900
Pink
50
100
200
300
4Next
500
600
700
800
900
Rose
50
100
200
300
400
500
600
700
800
900
