Frontend Academy · レッスン

Tailwind CSS のユーティリティファーストアプローチ

あらかじめ用意されたユーティリティクラスを HTML に直接適用し、tailwind.config.js でテーマをカスタマイズし、@apply で繰り返し使うパターンを抽出します。

「Tailwind CSS のユーティリティファーストアプローチ」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

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

Tailwind CSSは、あらゆるCSSプロパティに対応する、あらかじめ用意されたユーティリティクラスを提供します。カスタムCSSを記述する代わりに、HTMLへユーティリティクラスを直接追加してスタイルを組み合わせます。1つのクラスが1つのCSS宣言に対応します。

Tailwindのインストール

Tailwindをインストールして設定を初期化します。Viteプロジェクトでは、TailwindのViteプラグインまたはPostCSSプラグインを使用します。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

# Or with Vite plugin:
npm install -D @tailwindcss/vite

ユーティリティクラスを使ってみる

Tailwindのユーティリティクラスだけを使ってカードを作成します。カスタムCSSファイルは必要ありません。

<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
  <img class="w-full h-48 object-cover rounded-md mb-4" src="..." alt="...">
  <h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
  <p class="text-gray-500 mt-2">Card description goes here.</p>
  <button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-colors">
    Read More
  </button>
</div>

レスポンシブプレフィックス

レスポンシブなブレークポイントのプレフィックスを追加します。md:は中程度の画面以上で適用されます。lg:は大きな画面で適用されます。Tailwindはモバイルファーストです。

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

状態バリアント

状態バリアントを使ってクラスにプレフィックスを付けます。hover:、focus:、active:、disabled:、dark:などがあります。

<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed">

テーマの設定

tailwind.config.jsで、色、間隔、フォント、ブレークポイントをカスタマイズします。デフォルトテーマを拡張することも、一部を置き換えることもできます。

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        brand: { 500: '#6366f1', 600: '#4f46e5' }
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans]
      }
    }
  }
}

@apply — パターンの抽出

CSSファイルで@applyを使うと、ユーティリティクラスを再利用可能なCSSルールにまとめられます。ほとんどの場合は直接ユーティリティクラスを使う方法が推奨されるため、使用は控えめにしてください。

/* Only for highly repeated patterns */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-indigo-600 text-white rounded-md
           hover:bg-indigo-700 transition-colors font-medium;
  }
}

未使用CSSの削除

Tailwindは何千ものユーティリティクラスを生成します。本番環境ではソースファイルをスキャンし、使用されていないクラスをすべて削除するため、CSSファイルは非常に小さくなります（10KB未満になることもよくあります）。

React/VueでのTailwind

Reactでは、cn()（clsx + twMerge）を使うと、競合を起こさずにTailwindクラスを条件付きで適用できます。Vueでは:classバインディングを使用します。

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...classes: string[]) { return twMerge(clsx(classes)); }

<div className={cn('rounded-lg p-4', featured && 'border-2 border-indigo-600')}>

Tailwind IntelliSense

Tailwind CSS IntelliSenseのVSCode拡張機能をインストールすると、自動補完、ホバー時のクラス名プレビュー、未知のクラスのリンティングを利用できます。Tailwindの開発体験が大幅に向上します。

Tailwindへの批判と擁護

批判: HTMLが多くのクラスで埋め尽くされ、読みにくくなる。擁護: CSSを一切記述せず、すべてのスタイルを同じ場所で管理でき、設定によってデザインシステムを適用できる。Tailwindを導入したほとんどのチームが、生産性が一貫して向上したと報告しています。

クイックチェック

Tailwindは何千ものユーティリティクラスを生成しますが、本番バンドルのサイズをどのように扱いますか？

まとめ: Tailwind CSS

ユーティリティファースト: 1つのクラスが1つのCSSプロパティに対応する。ほとんどの場合、カスタムCSSは不要。レスポンシブと状態のプレフィックス（md:、hover:）を使用する。tailwind.config.jsでカスタマイズする。繰り返し使うパターンには@applyを使用する。本番ビルドでは未使用クラスをスキャンして削除する。Reactで条件付きクラスを使う場合はcn() + twMergeを使用する。IntelliSense拡張機能をインストールする。

よくある質問

「Tailwind CSS のユーティリティファーストアプローチ」レッスンは無料ですか？

はい。「Tailwind CSS のユーティリティファーストアプローチ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Tailwind CSS のユーティリティファーストアプローチ」で何を学びますか？

あらかじめ用意されたユーティリティクラスを HTML に直接適用し、tailwind.config.js でテーマをカスタマイズし、@apply で繰り返し使うパターンを抽出します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Tailwind CSS のユーティリティファーストアプローチ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る