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: レスポンシブ対応でスマホ表示時のフォントサイズを修正"
今後も追記していく予定です。
