はじめに
この記事では、TailwindCSSの概要と、実際に開発で役立ちそうなスタイルを備忘録として紹介します。
TailwindCSSを初めて使う方や、効率的に使いたい方にとって参考になれば幸いです。
公式ドキュメントには、さらに多くのユーティリティクラスや設定方法が詳しく記載されているので、興味がある方はぜひチェックしてみてください。
公式ドキュメントURL:
https://tailwindcss.com/docs
1. TailwindCSSとは？
1. 概要
TailwindCSSは、ユーティリティファーストのCSSフレームワークです。
事前に定義されたユーティリティクラスを使って、HTML上で直接スタイリングを指定することができ、自由度の高いデザインを効率的に構築できます。
2. ユーティリティクラスの例
ユーティリティクラスは、1つの特定のCSSプロパティとその値を表現する小さな単位のクラスのことです。
たとえば以下のコードをHTMLに記述するだけで、簡単に画像通りのスタイルを反映することができます。
<div class="p-4 bg-blue-500 text-white rounded-lg max-w-md mx-auto mt-10">
ユーティリティクラスで簡単にスタイリング
</div>
補足
-
p-4：パディングを16px追加 -
bg-blue-500：背景色を青に設定 -
text-white：テキスト色を白に設定 -
rounded-lg：角を丸くする -
max-w-md：要素の最大幅を「medium」に制限 -
mx-auto：要素を左右中央に配置 -
mt-10：上方向に40pxのマージンを追加
2.従来のCSSとTailwindCSSの違い
違いは以下の通りです。
| 項目 | 従来のCSS | TailwindCSS |
|---|---|---|
| スタイルの記述場所 | CSSファイルにクラスを定義 | HTMLに直接クラスを追加 |
| 柔軟性 | 再利用性が高いが、調整にはCSSの編集が必要 | 必要なスタイルをすぐに追加・変更可能 |
| 学習コスト | 独自のクラス名やCSS構造を覚える必要がある | クラス名が直感的で、覚えやすい |
個人的には、ユーティリティクラスをHTMLに直接記述するだけで、スタイルが適用される点が大きなメリットだと感じています。
3. TailwindCSS個人用チートシート
ここからは実際に開発で役立ちそうなスタイルを備忘録兼ねて簡単に紹介します。
1. 色（テキスト色・背景色）
<div class="text-red-500">赤い文字</div>
<div class="bg-blue-500 text-white">青い背景と白い文字</div>
- テキスト色：赤い文字が表示されます。
- 背景色 ：青い背景に白い文字が表示されます。
2. スペーシング（余白の調整）
<div class="p-4 bg-gray-200 mb-4">パディング16px、下マージン16px</div>
<div class="p-8 bg-gray-300">パディング32px</div>
- パディングとマージンの違いが明確にわかります。
補足
- パディング：要素の内側に余白を設定
- マージン：要素の外側に余白を設定
3. テキスト（フォントサイズ・整列）
<h1 class="text-2xl font-bold text-blue-500">大きな青い見出し</h1>
<p class="text-gray-700 mt-2">段落テキスト（灰色、上部に余白あり）</p>
- 見出しは大きく青色、段落テキストは灰色で少し小さめです。
4. レイアウト（フレックスボックス・グリッド）
フレックスボックス
<div class="flex justify-between items-center bg-gray-100 p-4">
<div class="p-2 bg-blue-500 text-white">Item 1</div>
<div class="p-2 bg-green-500 text-white">Item 2</div>
<div class="p-2 bg-red-500 text-white">Item 3</div>
</div>
- 各アイテムが横並びに配置され、スペースが均等に分割されています。
グリッド
<div class="grid grid-cols-3 gap-4">
<div class="p-4 bg-blue-500 text-white">Grid 1</div>
<div class="p-4 bg-green-500 text-white">Grid 2</div>
<div class="p-4 bg-red-500 text-white">Grid 3</div>
</div>
- グリッドレイアウトで3列に分割され、それぞれの間隔に余白が追加されています。
5. 状態（ホバー・フォーカス）
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
ホバーしてみてください
</button>
- 通常時とホバー時のボタン背景色の変化が表示されます。
6. ボーダー
<div class="border border-gray-400 p-4">境界線付きのボックス</div>
<div class="border-2 border-blue-500 p-4">太い青い境界線</div>
- 薄い灰色の境界線や、太い青い境界線が追加されます。
7. シャドウ
<div class="shadow-lg p-4 bg-white">大きな影がついたボックス</div>
<div class="shadow-md p-4 bg-white">中くらいの影がついたボックス</div>
- ボックスに大きな影や中くらいの影が追加されます。
8. テーブル
<table class="table-auto border-collapse border border-gray-300 w-full">
<thead>
<tr>
<th class="border border-gray-300 px-4 py-2 bg-blue-100 text-left">Header 1</th>
<th class="border border-gray-300 px-4 py-2 bg-blue-100 text-left">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-300 px-4 py-2 bg-white">Row 1 Col 1</td>
<td class="border border-gray-300 px-4 py-2 bg-white">Row 1 Col 2</td>
</tr>
<tr>
<td class="border border-gray-300 px-4 py-2 bg-gray-100">Row 2 Col 1</td>
<td class="border border-gray-300 px-4 py-2 bg-gray-100">Row 2 Col 2</td>
</tr>
<tr>
<td class="border border-gray-300 px-4 py-2 bg-white">Row 3 Col 1</td>
<td class="border border-gray-300 px-4 py-2 bg-white">Row 3 Col 2</td>
</tr>
<tr>
<td class="border border-gray-300 px-4 py-2 bg-gray-100">Row 4 Col 1</td>
<td class="border border-gray-300 px-4 py-2 bg-gray-100">Row 4 Col 2</td>
</tr>
</tbody>
</table>
- ヘッダー部分には淡い青（bg-blue-100）を設定。
- 偶数行（2行目と4行目）には少し濃いグレー（bg-gray-100）を設定。
- 各セルに余白（左右16px、上下8px）と灰色の境界線を追加。
4. おわりに
この記事では、TailwindCSSの概要と、よく使うスタイルを個人的な備忘録としてまとめました。HTMLにユーティリティクラスを直接記述することで、効率よくデザインを調整できる便利さを感じています。
TailwindCSSを初めて使う方や、効率的なスタイリングに興味がある方にとって、少しでも参考になれば嬉しいです。