Tailwind CSS入門｜ユーティリティファーストで効率的にスタイリングする方法

エンジニアのためのFigma入門も参考にしてください。

関連記事：CSS設計入門

Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。あらかじめ用意された小さなクラスを組み合わせてスタイリングする手法で、CSSファイルを別途書く必要がほとんどなくなります。

Tailwind CSSとは

従来のCSS設計では、.card-titleのようなセマンティックなクラス名を考え、対応するCSSを書いていました。Tailwind CSSでは、text-lg font-bold text-gray-900のようにHTMLに直接スタイルを記述します。

従来のCSSとの比較

<!-- 従来のCSS -->
<div class="card">
  <h2 class="card-title">タイトル</h2>
</div>

<!-- Tailwind CSS -->
<div class="rounded-lg shadow-md p-6 bg-white">
  <h2 class="text-xl font-bold text-gray-900">タイトル</h2>
</div>

セットアップ

npm install -D tailwindcss
npx tailwindcss init

tailwind.config.js で対象ファイルを設定します。

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

基本的なユーティリティクラス

レイアウト

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

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

タイポグラフィ

スペーシング

• p-4：padding 1rem（全方向）
• px-6：padding-left/right 1.5rem
• mt-8：margin-top 2rem
• space-y-4：子要素間の縦方向スペース

レスポンシブデザイン

Tailwindのレスポンシブはモバイルファーストです。

Webアクセシビリティ入門も参考にしてください。

<div class="text-sm md:text-base lg:text-lg">
  画面幅に応じてフォントサイズが変わります
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- レスポンシブなグリッド -->
</div>

ダークモード対応

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  ダークモードで色が切り替わります
</div>

コンポーネント化のコツ

クラスが長くなる場合は、React等のコンポーネントとして切り出すのが実践的です。

function Button({ children, variant = 'primary' }) {
  const base = 'px-4 py-2 rounded-lg font-medium transition-colors';
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
  };

  return (
    <button className={`${base} ${variants[variant]}`}>
      {children}
    </button>
  );
}

Tailwind CSSが向いている場面

• React / Next.js / Vueなどコンポーネントベースの開発
• プロトタイピングや素早いUI構築
• デザインシステムの一貫性を保ちたい場合

Tailwind CSSが向いていない場面

• 既存プロジェクトにCSSが大量にある場合
• クラス名が長くなることに抵抗がある場合
• チーム全員がTailwindに慣れていない場合

まとめ

Tailwind CSSは、慣れるとCSSを書く時間を大幅に削減できるフレームワークです。まずは小さなコンポーネントから試して、ユーティリティクラスの感覚を掴みましょう。

あわせて読みたい

• CSS設計入門｜BEM・FLOCSS・ユーティリティファーストの考え方
• React Hooks入門ガイド
• Next.js入門ガイド
• Web制作副業の始め方