TechBlog
web-development

Tailwind CSS入門｜ユーティリティファーストの考え方と基本的なクラス名の使い方

by あくえり
#Tailwind CSS #CSS #Web開発 #フロントエンド #初心者
Tailwind CSS入門
目次

Tailwind CSSとは何か

Tailwind CSSは、あらかじめ用意されたユーティリティクラス（小さな役割を持つCSSクラス）をHTMLに直接書いていくことでスタイリングする「ユーティリティファースト」のCSSフレームワークです。

2024年〜2025年のStateofCSSおよびStateofJS調査でも高い満足度を記録し続けており、Next.js・Astro・Nuxt.jsなど主要フレームワークのデフォルトCSSとして採用されているほど普及しています。

従来のCSSとの比較

従来のCSS（またはBEM記法）との違いを見てみましょう。

従来のCSS：

<!-- HTML -->
<button class="btn btn--primary">送信する</button>
/* CSS */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.btn--primary {
  background-color: #3b82f6;
  color: #ffffff;
}

.btn--primary:hover {
  background-color: #2563eb;
}

Tailwind CSSの場合：

<button class="inline-flex items-center px-4 py-2 rounded-md font-semibold cursor-pointer bg-blue-500 text-white hover:bg-blue-600">
  送信する
</button>

CSSファイルを別途作る必要がなく、HTML内だけでスタイルが完結します。「クラス名が長くなる」という意見もありますが、慣れると「CSSファイルとHTMLを行き来しなくて済む」という開発効率の高さが実感できます。

なぜTailwind CSSが人気なのか

1. CSSファイルが肥大化しない 従来のCSSはプロジェクトが大きくなるほどスタイルが増え、管理が難しくなります。Tailwindはビルド時に使っているクラスだけを含む最小限のCSSを生成するため、本番環境のファイルサイズが非常に小さくなります。

2. 命名に迷わない 「このボタンのクラス名を何にしよう？」と悩む必要がありません。既存のユーティリティクラスを組み合わせるだけです。

3. デザインの一貫性を保ちやすい カラーパレット・フォントサイズ・余白などが設定ファイル（tailwind.config.js）で一元管理されるため、デザインのブレが起きにくいです。

インストール方法

CDN（試し書き向け）

学習・試作目的なら、HTMLにCDNのscriptタグを追加するだけで使えます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS テスト</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-8">
  <h1 class="text-2xl font-bold text-gray-900">Hello, Tailwind!</h1>
</body>
</html>

npmでインストール（本番プロジェクト向け）

# プロジェクトにTailwind CSS v3をインストール
npm install -D tailwindcss postcss autoprefixer

# 設定ファイルを生成
npx tailwindcss init -p

生成された tailwind.config.js を編集して、Tailwindを適用するファイルを指定します。

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js,ts,jsx,tsx,astro,vue,svelte}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSSファイルにTailwindのディレクティブを追加します。

/* src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

基本クラス名の規則

スペーシング（余白）

Tailwindのスペーシングは 4 = 1rem = 16px を基準とした数値体系です。

<!-- パディング（内側の余白） -->
<div class="p-4">   <!-- padding: 1rem（16px）全方向 -->
<div class="px-4">  <!-- padding-left + padding-right: 1rem -->
<div class="py-2">  <!-- padding-top + padding-bottom: 0.5rem -->
<div class="pt-6">  <!-- padding-top: 1.5rem -->

<!-- マージン（外側の余白） -->
<div class="m-4">   <!-- margin: 1rem 全方向 -->
<div class="mx-auto"> <!-- margin-left + margin-right: auto（中央寄せ） -->
<div class="mt-8">  <!-- margin-top: 2rem -->

カラー

<!-- テキストカラー -->
<p class="text-gray-900">   <!-- ほぼ黒 -->
<p class="text-blue-500">   <!-- 標準的な青 -->
<p class="text-red-600">    <!-- やや濃い赤 -->

<!-- 背景カラー -->
<div class="bg-gray-100">   <!-- 薄いグレー -->
<div class="bg-white">      <!-- 白 -->
<div class="bg-blue-500">   <!-- 標準的な青 -->

<!-- ボーダーカラー -->
<div class="border border-gray-300"> <!-- 薄いグレーの枠線 -->

カラーは 色名-数値 の形式で、数値は50・100・200・300・400・500・600・700・800・900の10段階。数値が小さいほど薄く、大きいほど濃くなります。

サイズ

<!-- 横幅 -->
<div class="w-full">    <!-- width: 100% -->
<div class="w-1/2">     <!-- width: 50% -->
<div class="w-64">      <!-- width: 16rem（256px）-->
<div class="max-w-2xl"> <!-- max-width: 42rem -->

<!-- 縦幅 -->
<div class="h-screen">  <!-- height: 100vh -->
<div class="h-64">      <!-- height: 16rem（256px）-->
<div class="min-h-screen"> <!-- min-height: 100vh -->

タイポグラフィ

<!-- フォントサイズ -->
<p class="text-sm">   <!-- 0.875rem（14px）-->
<p class="text-base"> <!-- 1rem（16px）-->
<p class="text-lg">   <!-- 1.125rem（18px）-->
<p class="text-xl">   <!-- 1.25rem（20px）-->
<p class="text-2xl">  <!-- 1.5rem（24px）-->
<p class="text-4xl">  <!-- 2.25rem（36px）-->

<!-- フォントウェイト -->
<p class="font-normal">  <!-- font-weight: 400 -->
<p class="font-medium">  <!-- font-weight: 500 -->
<p class="font-semibold"> <!-- font-weight: 600 -->
<p class="font-bold">    <!-- font-weight: 700 -->

レスポンシブ対応

Tailwindではクラス名にプレフィックスを付けるだけでメディアクエリが適用されます。モバイルファーストの設計です。

プレフィックス適用条件
（なし）常に適用（スマホ含む全デバイス）
sm:640px以上
md:768px以上
lg:1024px以上
xl:1280px以上
2xl:1536px以上
<!-- スマホ：1列、タブレット（md）：2列、PC（lg）：3列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- スマホでは非表示、PCでは表示 -->
<nav class="hidden lg:flex gap-8">
  <a href="/">ホーム</a>
  <a href="/about">About</a>
</nav>

ダークモード・hover・focusの対応

<!-- hover：マウスオーバー時 -->
<button class="bg-blue-500 hover:bg-blue-600">
  ボタン
</button>

<!-- focus：フォーカス時 -->
<input class="border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">

<!-- ダークモード（class戦略） -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  コンテンツ
</div>

ダークモードを有効にするには tailwind.config.js に設定を追加します。

module.exports = {
  darkMode: 'class', // または 'media'（OSの設定に連動）
  // ...
}

実践：よく使うUIコンポーネントの作成

プライマリボタン

<button class="inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200">
  送信する
</button>

カード

<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
  <img class="w-full h-48 object-cover" src="thumbnail.jpg" alt="サムネイル">
  <div class="p-6">
    <h2 class="text-xl font-bold text-gray-900 mb-2">カードのタイトル</h2>
    <p class="text-gray-600 text-sm leading-relaxed">
      カードの説明文がここに入ります。テキストが長い場合も自然に折り返します。
    </p>
    <div class="mt-4">
      <a href="#" class="text-blue-500 hover:text-blue-600 font-medium text-sm">
        続きを読む →
      </a>
    </div>
  </div>
</div>

ナビゲーションバー

<nav class="bg-white border-b border-gray-200 px-4 py-3">
  <div class="max-w-6xl mx-auto flex items-center justify-between">
    <!-- ロゴ -->
    <a href="/" class="text-xl font-bold text-gray-900">MySite</a>

    <!-- デスクトップメニュー -->
    <ul class="hidden md:flex items-center gap-8">
      <li><a href="/" class="text-gray-600 hover:text-gray-900 font-medium">ホーム</a></li>
      <li><a href="/about" class="text-gray-600 hover:text-gray-900 font-medium">About</a></li>
      <li><a href="/blog" class="text-gray-600 hover:text-gray-900 font-medium">ブログ</a></li>
    </ul>

    <!-- CTAボタン -->
    <a href="/contact" class="hidden md:inline-flex px-4 py-2 rounded-md bg-blue-500 text-white font-medium hover:bg-blue-600 transition-colors">
      お問い合わせ
    </a>

    <!-- ハンバーガーボタン（スマホのみ） -->
    <button class="md:hidden p-2 text-gray-600">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>
  </div>
</nav>

VS Code拡張機能：Tailwind CSS IntelliSense

Tailwind CSS開発では「Tailwind CSS IntelliSense」という公式VS Code拡張機能が必須です。

  • クラス名の自動補完
  • カーソルを当てると実際に適用されるCSSが表示される
  • クラス名の誤字をハイライト表示

拡張機能マーケットプレイスで「Tailwind CSS IntelliSense」を検索してインストールするだけで使えます。

Tailwind CSS実践入門

Tailwind CSS v3の基礎からカスタムデザインシステムの構築まで解説した日本語書籍。Next.jsやAstroとの組み合わせ方も紹介されており、実務に直結する内容です。

¥2,970 Amazonで見る

※ アフィリエイトリンクを含みます

Udemy — Tailwind CSS From Scratch | Learn By Building Projects

実際にプロジェクトを作りながらTailwind CSSを体系的に学べる英語講座。ランディングページやダッシュボードの実装を通じて実践力が身につきます。

¥1,500〜 Udemyで見る

※ アフィリエイトリンクを含みます

まとめ

Tailwind CSSはユーティリティクラスを組み合わせることで、CSSファイルを作らずにスタイリングできるフレームワークです。最初はクラス名の多さに戸惑うかもしれませんが、スペーシング・カラー・フォントの命名規則を覚えれば、驚くほど素早くUIを構築できるようになります。まずはCDN版でシンプルなボタンやカードを作ることから始めてみてください。VS CodeのIntelliSense拡張を入れれば補完が効くので、クラス名を覚えながら書くハードルも大幅に下がります。

共有: