#2：TailwindCSSの使い方 - 爆速概要理解シリーズ（TailwindCSS編）

基本スタイルの使い方

Tailwind CSSの文字サイズ、色、余白、ボーダー、シャドウなどの基本的なスタイルを紹介。

✍️ テキストスタイル（文字）

✅ テキストサイズ

クラス名	意味
text-sm	小さい文字
text-lg	やや大きい文字
text-2xl	見出しサイズ

<p class="text-sm">小さいテキスト</p>
<p class="text-2xl font-bold">大きな太字テキスト</p>

✅ フォントの太さ・スタイル

クラス名	意味
font-light	細い文字
font-bold	太字
italic	イタリック体
underline	下線

✅ テキスト色・配置

<p class="text-red-500 text-center">赤く中央揃えのテキスト</p>
<p class="text-gray-700 text-right">グレーで右揃え</p>

🎨 背景色・ボーダー・角丸

✅ 背景色

<div class="bg-blue-100">背景が薄い青</div>
<div class="bg-green-500 text-white">緑背景＋白文字</div>

✅ ボーダー

<div class="border border-gray-400">枠線あり</div>
<div class="border-2 border-red-500">太い赤い枠線</div>

✅ 角丸（rounded）

クラス名	意味
rounded	基本の角丸（中くらい）
rounded-md	少し大きめの角丸
rounded-lg	大きな角丸

<div class="rounded">少し角が丸い</div>
<div class="rounded-full">完全な円形（画像などに使用）</div>

📦 余白（マージン・パディング）

Tailwindでは、mがマージン、pがパディング。さらに方向を追加して使う。
t（top）:上, b（bottom）:下, l（left）:左, r（right）:右
x（横軸）:左右, y（縦軸）:上下）

クラス名	意味
m-4	全方向にmargin
pt-2	上にpadding
px-6	左右にpadding
mb-8	下にmargin

<div class="p-4 m-2 bg-gray-100">余白ありのブロック</div>

🌟 シャドウ（影）

<div class="shadow">基本の影</div>
<div class="shadow-md">中くらいの影</div>
<div class="shadow-lg">大きな影</div>
<div class="shadow-none">影なし</div>

🧪 ホバー / アクティブ / フォーカス

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  ホバーで色が変わるボタン
</button>

hover:, focus:, active: などで状態によるスタイルも制御できる。

🔚 まとめ

• Tailwindでは文字、背景、余白、ボーダーなどを細かくクラスで制御
• クラス名のルールに慣れるとCSSを書く必要が激減
• 状態（ホバー・フォーカス）に応じて動きをつけるのも簡単

次章では、「レイアウト（Grid / Flex / Gapなど）」の使い方！