Tailwind CSSとは何かを理解しよう

学習の目標

本章では、以下の内容を学習します。

Tailwind CSSがどのようなCSSフレームワークなのかを理解する
ユーティリティファーストCSSの基本概念を学ぶ
従来のCSSとTailwind CSSの違いを把握する
Tailwind CSS CDNを使った簡単な実装を体験する

はじめに

Webサイトやアプリケーションの見た目を美しく整えるためには、CSS（Cascading Style Sheets）を使用します。しかし、CSSを一から書くのは時間がかかり、プロジェクトが大きくなるにつれて管理が困難になることがあります。

Tailwind CSSは、このような問題を解決するために開発されたモダンなCSSフレームワークです。特にReact開発において非常に人気が高く、多くの開発者に選ばれています。

スクリーンショット

本カリキュラムでは、React のスタイリングにはTailwind CSSを使用します。

この章では、Tailwind CSSがどのようなものなのか、そしてなぜReact開発で重宝されているのかを理解していきましょう。

ユーティリティファーストCSSの概念

従来のCSSの書き方

まず、従来のCSSがどのように書かれていたかを確認してみましょう。

一般的なCSS（従来の方法）では、以下のようにクラス名に意味を持たせて記述します。

.card {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button-primary {
  background-color: blue;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  border: none;
}

<div class="card">
  <h2>カードタイトル</h2>
  <p>カードの内容</p>
  <button class="button-primary">ボタン</button>
</div>

この方法では、HTML要素に対してクラス名を付け、CSSファイルでそのクラス名に対してスタイルを定義しています。

このように、別々なファイルでスタイルを定義する方法が従来のCSSの書き方です。

それに対して、Tailwind CSSは、ユーティリティファーストCSSというアプローチを採用しています。

ユーティリティファーストとは

ユーティリティファーストとは、小さな単一の機能を持つCSSクラスを組み合わせてデザインを作る手法です。

Tailwind CSSでは、以下のような小さなクラスを組み合わせて同じデザインを実現します。

<div class="bg-white rounded-lg p-4 shadow-md">
  <h2 class="text-xl font-bold">カードタイトル</h2>
  <p class="text-gray-600">カードの内容</p>
  <button class="bg-blue-500 text-white px-6 py-3 rounded border-0">ボタン</button>
</div>

この例では、以下のようなクラスが使われています。

bg-white: 背景色を白にする
rounded-lg: 角を大きく丸くする
p-4: パディングを16px（4 × 4px）にする
shadow-md: 中程度の影を付ける
text-xl: テキストサイズを大きくする
font-bold: フォントを太字にする

従来のCSSでは、これらのスタイルを一つのクラスにまとめていましたが、Tailwind CSSではそれぞれのスタイルを個別のクラスとして定義しています。

そして、HTMLの要素に必要なクラスを組み合わせることで、デザインを実現します。

ユーティリティファーストのメリット

このようなアプローチには、以下のメリットがあります。

高速な開発

新しいCSSクラスを作成する必要がなく、既存のクラスを組み合わせるだけでデザインを実現できます。

一貫性のあるデザイン

予め定義されたサイズや色の値を使用するため、デザイン全体で一貫性を保ちやすくなります。

メンテナンスが容易

HTMLを見るだけでどのようなスタイルが適用されているかが分かるため、理解しやすくなります。

従来のCSSとの違い

一見、従来のCSSとTailwind CSSは同じ目的を持っていますが、アプローチが大きく異なります。

ここでは、それぞれの違いを詳しく見ていきましょう。

従来のCSS開発の課題

従来のCSS開発では、以下のような課題がありました。

命名の困難さ

適切なクラス名を考えるのに時間がかかり、プロジェクトが大きくなると命名規則の統一が困難になります。

CSS肥大化

新しい機能を追加するたびにCSSファイルが大きくなり、不要なスタイルが蓄積されがちです。

スタイルの重複

似たようなスタイルが複数のクラスで定義され、コードの重複が発生します。

Tailwind CSSによる解決

Tailwind CSSは、これらの問題を以下の方法で解決します。

命名不要

事前に定義されたクラス名を使用するため、新しいクラス名を考える必要がありません。

必要な分だけ生成

実際に使用されているクラスのスタイルのみが最終的なCSSファイルに含まれるため、ファイルサイズを最小限に抑えられます。

再利用性

同じクラスを何度でも使い回すことができ、デザインの一貫性を保ちながら開発効率を向上させます。

Reactでのスタイリング手法比較

ここまでで、Tailwind CSSの基本概念とユーティリティファーストCSSの利点を理解しました。

こういったメリットがあるため、最近ではReact開発においてもTailwind CSSが非常に人気です。

また、Tailwind CSSを利用したデザイン手法は同一ファイル内で完結し、コンポーネントごとにスタイルを管理できるため、Reactのコンポーネントベースの開発スタイルとも非常に相性が良いです。

さらに、ChatGPT などの AI ツールも Tailwind CSS を前提にしたコード生成が可能なため、開発効率が向上します。

Tailwind CSS CDNの導入方法

実際にTailwind CSSを試してみましょう。まずは最も簡単な方法として、CDN（Content Delivery Network）を使用した導入方法を体験してみます。

CDNとは

CDNとは、ライブラリやフレームワークをインターネット経由で直接読み込む方法です。ファイルをダウンロードしたりインストールしたりする必要がなく、HTMLファイルに1行追加するだけで使用できます。

基本的なHTMLファイルの作成

一旦、React プロジェクトとは関係なく、HTML だけでTailwind CSSを試してみましょう。

VS Codeで新しいファイルを作成し、tailwind-test.htmlという名前で保存してください。

保存場所は適当な場所でも、React プロジェクト内の適当な場所でも構いません。

そして、以下のコードを記述してみましょう。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tailwind CSS Test</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

このHTMLファイルをブラウザで開いてみましょう。 VS Codeの場合、ファイルを右クリックして「Open with Live Server」を選択するか、ファイルをダブルクリックしてブラウザで開くことができます。

Tailwind CSSの効果を確認

ブラウザで開くと、「Hello world!」というテキストが以下のスタイルで表示されるはずです。

text-3xl: 大きなフォントサイズ
font-bold: 太字
underline: 下線

スクリーンショット

ちなみに、従来のCSSで同じスタイルを適用する場合は、以下のように書く必要があります。

h1 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700;     /* font-bold */
  text-decoration: underline; /* underline */
}

このように、Tailwind CSSを使用することで、HTMLのクラスだけでスタイルを適用できることが確認できます。

より複雑な例を試してみる

HTMLファイルを以下のように拡張して、より多くのTailwind CSSクラスを試してみましょう。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tailwind CSS Test</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-8">
  <div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-6">
    <h1 class="text-2xl font-bold text-gray-800 mb-4">
      Tailwind CSS テスト
    </h1>
    <p class="text-gray-600 mb-6">
      これはTailwind CSSを使用したサンプルカードです。
    </p>
    <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
      ボタンをクリック
    </button>
  </div>
</body>
</html>

このコードでは、以下のようなスタイルが適用されます。

カード形式のレイアウト（白い背景、影付き、角丸）
中央配置とレスポンシブ対応
ホバー効果付きのボタン
適切な余白とテキストカラー

保存してブラウザで確認すると、美しいカードデザインが表示されるはずです。

スクリーンショット

まとめ

本章では、Tailwind CSSの基本概念について学習しました。理解できた内容は以下の通りです。

Tailwind CSSはユーティリティファーストCSSフレームワークである
小さな単一機能のクラスを組み合わせてデザインを作成する手法を学びました
従来のCSSと比較して開発効率やメンテナンス性が向上することを理解しました
Reactでの様々なスタイリング手法の中でTailwind CSSの位置づけを把握しました
CDNを使用した簡単な導入方法と基本的な使用感を体験しました

Tailwind CSSは最初は慣れが必要ですが、一度慣れてしまうと非常に効率的にスタイリングができるようになります。また、デザインシステムが内蔵されているため、自然と一貫性のある美しいデザインを作ることができます。

次の章では、Tailwind CSSの具体的な使い方について、より詳しく学んでいきましょう。