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>

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

基本的な使い方

レイアウト

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>