Tailwind CSS の基本をマスターしよう（前編）

いよいよ Tailwind CSS の基本的な使い方を学んでいきましょう！この前編では、Tailwind CSS の最大の特徴である「ユーティリティファースト」の考え方と、実際に HTML にクラスを適用してスタイルを変更する方法、そしてよく使う便利なユーティリティクラスについて解説します。

1. ユーティリティファーストってどういうこと？

Tailwind CSS の最大の特徴は、「ユーティリティファースト」 という考え方に基づいていることです。これは、小さな部品（ユーティリティ）となるクラスを多数用意し、それらを HTML の要素に組み合わせて適用することでスタイルを構築していく 方法です。

従来の CSS のように、style.css などのファイルに、要素やコンポーネントごとにスタイルをまとめて記述していく方法とは大きく異なります。

例えば、ボタンにスタイルを適用する場合、従来の CSS では以下のように記述することが多いでしょう。

css

/* style.css */
.primary-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

html

<!-- index.html -->
<button class="primary-button">ボタン</button>

一方、Tailwind CSS では、以下のようにユーティリティクラスを組み合わせて記述します。

html

<button class="bg-blue-500 text-white px-4 py-2 rounded-md">ボタン</button>

それぞれのクラスの意味は以下の通りです。

bg-blue-500: 背景色を青色（blue の 500 番の色合い）に設定
text-white: テキストの色を白色に設定
px-4: 左右（x 軸）のパディングを 1rem（4 は 0.25rem の 4 倍）に設定
py-2: 上下（y 軸）のパディングを 0.5rem（2 は 0.25rem の 2 倍）に設定
rounded-md: 角丸を少し丸く（md は medium の略）設定

このように、Tailwind CSS では、小さな役割を持つユーティリティクラスを組み合わせて、一つの要素のスタイルを作り上げていきます。

最初はクラス名の多さに戸惑うかもしれませんが、慣れてくると、「このスタイルを適用したい！」と思ったときに、直感的にクラス名を選べる ようになります。なぜなら、Tailwind CSS のユーティリティクラスは、ほぼ CSS のプロパティと 1 対 1 で対応している からです。

2. クラス名を組み合わせてスタイルを適用！

それでは、実際に Tailwind CSS のユーティリティクラスを使って、HTML 要素にスタイルを適用してみましょう！

先ほどの index.html を以下のように変更してみてください。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Practice</title>
    <link rel="stylesheet" href="./dist/output.css">
</head>
<body>
    <h1 class="text-3xl font-bold underline mb-8">Tailwind CSS の練習</h1>

    <div class="bg-gray-100 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4">自己紹介</h2>
        <p class="text-gray-700">こんにちは！私は Tailwind CSS を勉強中の者です。趣味は Web サイト制作です。よろしくお願いします！</p>
        <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            詳しく見る
        </button>
    </div>
</body>
</html>

h1 タグの下に、自己紹介のセクションを追加しました。div、h2、p、button タグに、それぞれ Tailwind CSS のクラスを追加しています。

ここで、ターミナルで npm run build が実行中（ファイルを監視中）であることを確認してください。もし実行されていない場合は、再度 npm run build を実行します。

ブラウザで index.html を表示すると、以下のようにスタイルが適用されているはずです。

div タグには、背景色、パディング、角丸、影が適用されています。
h2 タグには、文字サイズ、フォントの太さ、下マージンが適用されています。
p タグには、文字色が適用されています。
button タグには、背景色、ホバー時の背景色、文字色、フォントの太さ、パディング、角丸が適用されています。

このように、Tailwind CSS のクラスを組み合わせることで、簡単に HTML 要素にスタイルを適用することができます。

3. よく使うユーティリティクラスを覚えよう

Tailwind CSS には、数え切れないほどのユーティリティクラスが用意されています。しかし、そのすべてを覚える必要はありません。ここでは、特によく使う基本的なユーティリティクラスをいくつか紹介します。

文字色

text-red-500: 文字色を赤色に
text-green-600: 文字色を緑色に
text-blue-700: 文字色を青色に
text-gray-800: 文字色を濃い灰色に
text-white: 文字色を白色に

背景色

bg-red-100: 背景色を薄い赤色に
bg-green-200: 背景色を薄い緑色に
bg-blue-300: 背景色を薄い青色に
bg-gray-400: 背景色を薄い灰色に
bg-black: 背景色を黒色に

フォントサイズ

text-xs: 文字サイズを小さく（extra small）
text-sm: 文字サイズを少し小さく（small）
text-base: 文字サイズを標準に（base）
text-lg: 文字サイズを少し大きく（large）
text-xl: 文字サイズを大きく（extra large）
text-2xl: 文字サイズをさらに大きく

フォントの太さ

font-light: フォントを細く
font-normal: フォントを標準の太さに
font-medium: フォントを少し太く
font-semibold: フォントを太く
font-bold: フォントをさらに太く

余白 (margin, padding)

m-4: 全方向に 1rem のマージン
mt-2: 上方向に 0.5rem のマージン
mr-8: 右方向に 2rem のマージン
mb-1: 下方向に 0.25rem のマージン
ml-4: 左方向に 1rem のマージン
p-4: 全方向に 1rem のパディング
pt-2: 上方向に 0.5rem のパディング
pr-8: 右方向に 2rem のパディング
pb-1: 下方向に 0.25rem のパディング
pl-4: 左方向に 1rem のパディング

その他

underline: 下線を引く
rounded: 少し角丸にする
rounded-lg: 大きく角丸にする
shadow-md: 影をつける（medium）
w-full: 幅を 100% にする
h-10: 高さを 2.5rem にする

これらはほんの一例です。他にもたくさんのユーティリティクラスがありますので、Tailwind CSS の公式ドキュメント（https://tailwindcss.com/docs/utility-first）を参照しながら、色々なクラスを試してみてください。