Tailwind のユーティリティクス

背景色: bg-red-500, bg-gray-50
文字色: text-blue-500, text-white
フォントサイズ: text-xl, text-4xl
マージン・パディング: m-4, p-8, mt-6
レイアウト: flex, grid, h-screen
ホバー時スタイル: hover:bg-blue-600
ボーダー・シャドウ: rounded, shadow-lg

rounded オプション

角を丸くするオプション

クラス名	効果
rounded-sm	ほんの少し丸める
rounded	標準の丸み
rounded-md	中程度の丸み
rounded-lg	大きな丸み
rounded-xl	さらに大きい
rounded-2xl	かなり大きい
rounded-full	完全な円

テキストの大きさ（text-{size}）

その前に

この記事によると、Tailwind CSSの text-* の line-height の指定値が変わったとのことなので、こちらを参照しておくといいかも、、、？
【追記：２月１３日】

テキストのサイズ

クラス	サイズ(px)	説明
text-xs	12px	超小さい
text-sm	14px	小さい
text-base	16px	デフォルト
text-lg	18px	少し大きい
text-xl	20px	大きい
text-2xl	24px	さらに大きい
text-3xl	30px	見出しサイズ
text-4xl	36px	大きい見出し
text-5xl	48px	特大
text-6xl	60px	超特大

使用例

<p className="text-lg">少し大きいテキスト</p>
<h1 className="text-3xl font-bold">見出し</h1>

テキストの太さ（font-{weight}）

クラス	説明
font-thin	極細
font-extralight	超軽量
font-light	軽め
font-normal	普通 (デフォルト)
font-medium	やや太め
font-semibold	少し太め
font-bold	太い
font-extrabold	超太い
font-black	最大の太さ

使用例

<p className="font-light">軽めのテキスト</p>
<p className="font-bold">太いテキスト</p>
<p className="font-black">最大の太さ</p>

応用例

<h1 class="text-4xl font-bold">大きな太字の見出し</h1>
<p class="text-base font-light">これは普通の文章ですが、少し細いフォントです。</p>
<p class="text-lg font-semibold">これは少し大きめで、太めの文章です。</p>

テキストの装飾

クラス	説明
underline	下線をつける
line-through	取り消し線
overline	上線
no-underline	下線なし
italic	斜体
not-italic	通常のフォント

使用例

<p class="underline">このテキストには下線があります</p>
<p class="line-through">このテキストには取り消し線があります</p>
<p class="italic">このテキストは斜体です</p>

テキストの配置

クラス	説明
text-left	左寄せ
text-center	中央寄せ
text-right	右寄せ
text-justify	両端揃え

使用例

<p class="text-center">このテキストは中央に配置されています</p>

文字間・行間

文字列

クラス	説明
tracking-tighter	文字間を狭くする
tracking-tight	少し狭くする
tracking-normal	デフォルト
tracking-wide	少し広くする
tracking-wider	さらに広くする
tracking-widest	最大に広くする

行間

クラス	説明
leading-none	行間なし
leading-tight	少し詰める
leading-normal	デフォルト
leading-loose	広めにする

使用例

文字間

<p class="tracking-wider">このテキストは文字間が広いです</p>

行間

<p class="leading-loose">このテキストの行間は広めに設定されています</p>

配色関係

色の指定

色の名前	クラス例 (text-色名-強さ)
黒・白	text-black / text-white
グレー	text-gray-500
赤	text-red-500
青	text-blue-500
緑	text-green-500
黄	text-yellow-500
紫	text-purple-500
ピンク	text-pink-500

濃淡の指定

クラス	色の濃さ(明るい → 濃い)
text-red-100	とても薄い赤
text-red-500	標準の赤
text-red-900	濃い赤

使用例

<p class="text-green-300">薄い緑</p>
<p class="text-green-600">普通の緑</p>
<p class="text-green-900">濃い緑</p>

応用例

ダークモードへの対応

<p className="text-gray-800 dark:text-gray-200">
  通常は黒に近い色、ダークモードでは白に近い色
</p>

ホバー時の対応・変更

<a href="#" class="text-blue-500 hover:text-blue-700">
  ホバーすると色が変わる
</a>

グラデーション文字

<p class="bg-gradient-to-r from-pink-500 to-yellow-500 bg-clip-text text-transparent">
  グラデーションの文字
</p>

シャドウ（影）

クラス	説明
shadow-sm	小さな影
shadow	標準の影
shadow-md	中程度の影
shadow-lg	大きな影
shadow-xl	さらに大きな影
shadow-2xl	最大の影

使用例

<p class="shadow-lg">このテキストには影がついています</p>

レスポンシブ対応

クラス	説明
sm:text-lg	スマホで text-lg にする
md:text-xl	タブレットで text-xl にする
lg:text-2xl	PCで text-2xl にする
xl:text-3xl	大画面で text-3xl にする

<p class="text-base sm:text-lg md:text-xl lg:text-2xl">
  画面サイズに応じてフォントサイズが変わります
</p>

その他

コミットメッセージの書き方

変更内容の種類

種類	説明
feat:	新機能の追加
fix:	バグ修正
style:	コードのフォーマット変更（動作に影響なし）
refactor:	リファクタリング（仕様変更なし）
docs:	ドキュメント更新
chore:	ビルドツールや設定の変更

コミット例

git commit -m "feat: Tailwindの背景・文字色・レイアウト設定を追加"
git commit -m "style: テキストのフォントサイズと太さの調整"
git commit -m "fix: レスポンシブ対応でスマホ表示時のフォントサイズを修正"

今後も追記していく予定です。