Tailwind CSSに慣れたら、CSSファイルを開かなくなった

はじめに

結論から言うと、2025年のCSS開発で迷ったらTailwind CSS一択ですね。

正直なところ、最初は「クラス名長すぎない？」と思っていました。でも実際に使い始めると、開発効率が爆上がりして考えが180度変わりました。GitHub Stars 91.4k、月間ダウンロード数4,000万超え、OpenAIやShopify、NASAまで採用しているという実績を見れば、その人気の理由がわかると思います。

この記事では、Tailwind CSSの特徴からインストール方法、実践的な使い方まで解説していきます。

とはいえ、読むより触った方が早いと思います。ボタンひとつでダークモードやレイアウトが切り替わる実行可能サンプルを用意したので、先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

Tailwind CSSとは

Tailwind CSSは「ユーティリティファースト」という設計思想のCSSフレームワークです。

従来のCSSフレームワークが「ボタンはこのデザイン」「カードはこのレイアウト」と決め打ちするのに対して、Tailwind CSSはflex、pt-4、text-centerといった小さなユーティリティクラスを組み合わせてデザインを構築します。

<!-- 従来のCSS -->
<button class="btn btn-primary">送信</button>

<!-- Tailwind CSS -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  送信
</button>

一見するとクラス名が長いと感じるかもしれませんが、これが意外と理にかなっているんですよ。

特徴・メリット

1. 開発速度が圧倒的に速い

個人的に一番のメリットはこれ。CSSファイルを行ったり来たりする必要がなく、HTMLを書きながらスタイリングが完結します。30代になって時間の大切さが身に沁みている身としては、この時短効果は本当にありがたい。

2. 本番ビルドが軽量

未使用のCSSは自動的に削除されるので、本番環境では大体10kB未満に収まります。パフォーマンスを気にする必要がほとんどないのは嬉しいポイント。

3. レスポンシブデザインが簡単

ブレークポイントの指定がプレフィックス一発で完了します。

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <!-- モバイルは1列、タブレットは2列、PCは3列 -->
</div>

4. ダークモード対応が楽

dark:プレフィックスを付けるだけでダークモード対応が完了します。

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  自動でダークモード対応
</div>

5. カスタマイズ性が高い

v4からはCSS変数での設定が可能になり、より柔軟なカスタマイズができるようになりました。

@theme {
  --font-sans: "Inter", sans-serif;
  --color-primary: oklch(0.7 0.28 145);
}

6. 最新CSS機能をサポート

P3カラー、コンテナクエリ、CSS Cascade Layersなど、モダンなCSS機能に対応しています。将来を見据えた技術選定という意味でも安心感があります。

インストール方法

2025年12月現在の最新バージョンはv4.1.17です。主要なフレームワークごとのインストール方法を紹介します。

Vite + React/Vue

npm install tailwindcss @tailwindcss/vite

vite.config.tsに追加:

import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

CSSファイルでインポート:

@import "tailwindcss";

Next.js

npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjsを作成:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

globals.cssでインポート:

@import "tailwindcss";

CDNで試す（開発用）

とりあえず試したい場合はCDNでサクッと導入できます。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold text-blue-500">Hello Tailwind!</h1>
</body>
</html>

ただし本番環境ではビルドツール経由での利用を推奨します。

Tailwind CSSのサンプルを動かす

Tailwind CSSはビルドツール前提のイメージが強いですが、実は @tailwindcss/browser というブラウザ内JITコンパイラも配布されていて、<script>タグ1つでその場でクラスをコンパイルできます。下のサンプルはその仕組みで動いていて、実際にクラス名がリアルタイムで生成されています。

「ダークモード切替」ボタンを押すと<html>要素にdarkクラスがトグルされ、dark:プレフィックス付きのクラスが即座に反映されます。「1列/2列/3列」ボタンを押すと、グリッドのgrid-cols-*クラスがJSで動的に書き換わり、カードの並びがその場で変わります。コード内のgrid-cols-${cols}の数字を書き換えて実行し直せば、何列でも試せます。

ポイントだけを抜き出すと、ダークモードの切り替えはbg-white dark:bg-gray-900のようにdark:プレフィックスを並べて書くだけ、列数の切り替えはgrid grid-cols-2の数字部分をJSで差し替えるだけです。

<!-- dark: プレフィックスでダークモード時のスタイルを指定 -->
<div class="bg-gray-100 dark:bg-gray-900 p-6 transition-colors">
  <h1 class="text-lg font-bold text-gray-900 dark:text-white">
    Tailwind Playground
  </h1>
  <button id="theme-btn" class="px-3 py-1 rounded bg-blue-500 text-white">
    ダークモード切替
  </button>

  <!-- grid-cols-* を動的に書き換えて列数を変える -->
  <div id="grid" class="grid grid-cols-2 gap-3">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">A</div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">B</div>
  </div>
</div>

<script>
  document.getElementById('theme-btn').addEventListener('click', () => {
    document.documentElement.classList.toggle('dark') // dark: が反応
  })
  document.getElementById('grid').className = 'grid grid-cols-3 gap-3'
</script>

実際に手を動かして確認できるのが下のサンプルです。ボタンを押すたびにdark:とgrid-cols-*の挙動がその場で切り替わります。

ポイントは、グリッドの列数変更をgrid.classNameの書き換えというJSだけで実現している点です。Tailwind側がDOMの変化を監視してクラスを都度コンパイルしてくれるので、コンポーネント側は普通にクラス名を切り替えるだけで済みます。grid-cols-3をgrid-cols-4に書き換えて実行し直せば4列になりますし、dark:bg-gray-800のgray-800をslate-900に変えればダークモード時の背景色も変わります。ビルド後の本番環境でも、この「クラスを切り替えるだけで見た目が変わる」という感覚は変わりません。

基本的な使い方

レイアウト

Flexboxとグリッドがクラス一発で使えます。

<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
  <div>左</div>
  <div>右</div>
</div>

<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

スペーシング

margin/paddingは数値で直感的に指定できます。

<div class="m-4 p-6">
  <!-- margin: 1rem, padding: 1.5rem -->
</div>

<div class="mt-2 mb-4 px-6 py-3">
  <!-- margin-top: 0.5rem, margin-bottom: 1rem -->
  <!-- padding-x: 1.5rem, padding-y: 0.75rem -->
</div>

タイポグラフィ

フォントサイズ、太さ、色を簡単に指定できます。

<h1 class="text-4xl font-bold text-gray-900">見出し</h1>
<p class="text-base text-gray-600 leading-relaxed">本文テキスト</p>
<span class="text-sm text-gray-400">補足テキスト</span>

ホバー・フォーカス

状態に応じたスタイルも簡単に適用できます。

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 transition-colors">
  クリック
</button>

<input class="border border-gray-300 focus:border-blue-500 focus:outline-none rounded px-4 py-2" />

アニメーション

よく使うアニメーションはビルトインで用意されています。

<div class="animate-spin">ローディング</div>
<div class="animate-pulse">スケルトン</div>
<div class="animate-bounce">バウンス</div>

実践的なユースケース

カード型コンポーネント

<div class="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-800">
  <img class="w-full h-48 object-cover" src="/image.jpg" alt="サムネイル" />
  <div class="p-6">
    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
      記事タイトル
    </h2>
    <p class="text-gray-600 dark:text-gray-300 text-sm">
      記事の説明文がここに入ります。
    </p>
    <div class="mt-4 flex items-center gap-2">
      <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">タグ1</span>
      <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">タグ2</span>
    </div>
  </div>
</div>

レスポンシブなナビゲーション

<nav class="bg-white shadow-md">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <div class="text-xl font-bold">Logo</div>

      <!-- デスクトップメニュー -->
      <div class="hidden md:flex items-center gap-8">
        <a href="#" class="text-gray-600 hover:text-blue-500 transition-colors">ホーム</a>
        <a href="#" class="text-gray-600 hover:text-blue-500 transition-colors">サービス</a>
        <a href="#" class="text-gray-600 hover:text-blue-500 transition-colors">お問い合わせ</a>
      </div>

      <!-- モバイルメニューボタン -->
      <button class="md:hidden p-2">
        <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>
  </div>
</nav>

フォーム

<form class="max-w-md mx-auto space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">メールアドレス</label>
    <input
      type="email"
      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
      placeholder="example@email.com"
    />
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">パスワード</label>
    <input
      type="password"
      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
    />
  </div>

  <button
    type="submit"
    class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg transition-colors"
  >
    ログイン
  </button>
</form>

フォームは「入力するたびに状態が変わる」体験を作りやすいパターンです。次のサンプルは、メールアドレスとパスワードの入力値に応じてborder-red-500とborder-gray-300をJSで動的に切り替え、正しく入力できている項目にはチェックマークを出しています。値を消したり崩したりして、リアルタイムでボーダーの色やチェックマークが変わる様子を確認してみてください。

Tailwind CSSで入力チェックを動かす

核心部分だけを抜き出すと、input要素のclassNameを丸ごと入れ替えて、条件に応じてborder-red-500（エラー時）とborder-gray-300（正常時）を切り替えているだけです。

function validate() {
  const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)

  // border-red-500 / border-gray-300 を条件で出し分ける
  email.className = `w-full px-4 py-2 border rounded-lg outline-none
    transition-colors focus:ring-2 focus:ring-blue-500
    ${isEmailValid ? 'border-gray-300' : 'border-red-500'}`

  // 正常な項目には text-green-600 のチェックマークを表示
  emailOk.classList.toggle('hidden', !isEmailValid)
}

// change ではなく input で毎打鍵ごとに再評価する
email.addEventListener('input', validate)

実際に動かせるのが下のサンプルです。inputイベントで毎回validate()が呼ばれるため、changeイベントのようにフォーカスを外すまで待たされることなく、打つたびにTailwindのクラス名が入れ替わります。

バリデーション自体はTailwindの役割ではありませんが、「状態に応じてクラス名を出し分ける」というTailwindらしい書き方が、入力チェックのようなUIとも相性がいいことが伝わると思います。エラー色を変えたいときはborder-red-500をborder-orange-500に、判定条件を緩めたいときはpassword.value.length >= 8の8を書き換えるだけで、見た目とロジックの両方をこのスニペット内だけで完結して調整できます。