ソースファイル内のクラスの検出

概要

Tailwind は、プロジェクトをスキャンしてユーティリティクラスを探し、実際に使用しているクラスに基づいて必要な CSS をすべて生成します。

これにより、CSS が可能な限り小さくなり、「任意の値」のような機能も実現できます。

クラスの検出方法

Tailwind はすべてのソースファイルをプレーンテキストとして扱い、実際にファイルをコードとして解析しようとはしません。

代わりに、ファイル内のトークンの中から、Tailwind がクラス名に期待する文字に基づいてクラスの可能性があるものを探します。

export function Button({ color, children }) {
  const colors = {
    black: "bg-black text-white",
    blue: "bg-blue-500 text-white",
    white: "bg-white text-black",
  };
  return (
    <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm/6 font-medium shadow`}>
      {children}
    </button>
  );
}

次に、これらのすべてのトークンに対して CSS を生成しようとし、フレームワークが認識しているユーティリティクラスにマッピングされないトークンは破棄します。

動的なクラス名

Tailwind はソースファイルをプレーンテキストとしてスキャンするため、使用しているプログラミング言語での文字列連結や補間を理解する方法がありません。

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

上記の例では、text-red-600 と text-green-600 という文字列は存在しないため、Tailwind はこれらのクラスを生成しません。

代わりに、使用しているクラス名はすべて完全に存在するようにしてください

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

React や Vue のようなコンポーネントライブラリを使用している場合、これはプロパティを使用してクラスを動的に構築するべきではないことを意味します。

function Button({ color, children }) {
  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;
}

代わりに、プロパティをビルド時に静的に検出可能な完全なクラス名にマッピングします

function Button({ color, children }) {
  const colorVariants = {
    blue: "bg-blue-600 hover:bg-blue-500",
    red: "bg-red-600 hover:bg-red-500",
  };
  return <button className={`${colorVariants[color]} ...`}>{children}</button>;
}

これには、たとえば、異なるプロパティ値を異なる色合いにマッピングできるという追加の利点があります

function Button({ color, children }) {
  const colorVariants = {
    blue: "bg-blue-600 hover:bg-blue-500 text-white",
    red: "bg-red-500 hover:bg-red-400 text-white",
    yellow: "bg-yellow-300 hover:bg-yellow-400 text-black",
  };
  return <button className={`${colorVariants[color]} ...`}>{children}</button>;
}

コード内で常に完全なクラス名を使用する限り、Tailwind は毎回完璧にすべての CSS を生成します。

スキャンされるファイル

Tailwind は、プロジェクト内のすべてのファイルをクラス名を探してスキャンしますが、以下の場合を除きます。

• .gitignore ファイルに含まれるファイル
• 画像、動画、zip ファイルなどのバイナリファイル
• CSS ファイル
• 一般的なパッケージマネージャーのロックファイル

デフォルトで Tailwind が無視しているファイルをスキャンする必要がある場合は、「明示的なソース登録」でそれらのソースを明示的に登録できます。

明示的なソース登録

スタイルシートからの相対パスでソースパスを明示的に登録するには、@source を使用します。

@import "tailwindcss";
@source "../node_modules/@acmecorp/ui-lib";

これは、Tailwind で構築された外部ライブラリをスキャンする必要がある場合に特に役立ちます。通常、依存関係は .gitignore ファイルにリストされており、デフォルトでは Tailwind によって無視されるためです。

ベースパスの設定

Tailwind は、デフォルトでクラス名をスキャンする際の開始点として、現在の作業ディレクトリを使用します。

ソース検出のベースパスを明示的に設定するには、CSS で Tailwind をインポートするときに source() 関数を使用します。

@import "tailwindcss" source("../src");

これは、ビルドコマンドが各プロジェクトのルートではなく、モノレポのルートから実行されるモノレポで作業する場合に役立ちます。

特定のパスの無視

クラス名をスキャンするときに、スタイルシートからの相対パスで特定のパスを無視するには、@source not を使用します。

@import "tailwindcss";
@source not "../src/components/legacy";

これは、プロジェクト内に Tailwind クラスを使用しないことがわかっている大きなディレクトリ（レガシーコンポーネントやサードパーティライブラリなど）がある場合に役立ちます。

自動検出の無効化

すべてのソースを明示的に登録したい場合は、source(none) を使用して自動ソース検出を完全に無効にします。

@import "tailwindcss" source(none);
@source "../admin";
@source "../shared";

これは、複数の Tailwind スタイルシートを持つプロジェクトで、各スタイルシートに必要なクラスのみが含まれるようにしたい場合に役立ちます。

特定のユーティリティのセーフリスト化

コンテンツファイルに存在しない特定のクラス名を Tailwind に確実に生成させたい場合は、@source inline() を使用して強制的に生成させます。

@import "tailwindcss";
@source inline("underline");

.underline {
  text-decoration: underline;
}

バリアントのセーフリスト化

バリアントを持つクラスを生成するために @source inline() を使用することもできます。たとえば、underline クラスを hover および focus バリアントで生成するには、ソース入力に {hover:,focus:,} を追加します。

@import "tailwindcss";
@source inline("{hover:,focus:,}underline");

.underline {
  text-decoration: underline;
}
@media (hover: hover) {
  .hover\:underline:hover {
    text-decoration: underline;
  }
}
@media (focus: focus) {
  .focus\:underline:focus {
    text-decoration: underline;
  }
}

範囲を使用したセーフリスト化

ソース入力は「ブレース展開」されるため、複数のクラスを一度に生成できます。たとえば、すべての赤色の背景色を hover バリアントで生成するには、範囲を使用します。

@import "tailwindcss";
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");

.bg-red-50 {
  background-color: var(--color-red-50);
}
.bg-red-100 {
  background-color: var(--color-red-100);
}
.bg-red-200 {
  background-color: var(--color-red-200);
}
/* ... */
.bg-red-800 {
  background-color: var(--color-red-800);
}
.bg-red-900 {
  background-color: var(--color-red-900);
}
.bg-red-950 {
  background-color: var(--color-red-950);
}
@media (hover: hover) {
  .hover\:bg-red-50:hover {
    background-color: var(--color-red-50);
  }
  /* ... */
  .hover\:bg-red-950:hover {
    background-color: var(--color-red-950);
  }
}

これにより、赤色の背景色が 100 から 900 まで 100 刻みで生成され、最初のシェードと最後のシェードである 50 と 950 も生成されます。また、これらの各クラスに hover: バリアントが追加されます。

クラスの明示的な除外

ソースファイルで検出された場合でも、特定のクラスが生成されないようにするには、@source not inline() を使用します。

@import "tailwindcss";
@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");

これにより、赤色の背景ユーティリティとその hover および focus バリアントが生成から明示的に除外されます。