Tailwinds の「safelist」を使用して動的クラスを処理する方法

Tailwind CSS は、開発者がカスタム デザインを迅速かつ効率的に作成できるようにする、人気のあるユーティリティ優先の CSS フレームワークです。デフォルトでは、Tailwind CSS は幅広いユーティリティ クラスを生成するため、ファイル サイズが大きくなる可能性があります。この問題に対処するために、Tailwind CSS には PurgeCSS と呼ばれる組み込み機能が付属しており、運用ビルドから未使用のスタイルを削除して、最終的な CSS ファイルをより小さく、よりパフォーマンスの高いものにします。ただし、アプリケーション内で特定のスタイルが動的または条件付きで使用されている場合、この自動削除によって問題が発生する場合があります。この記事では、Tailwind CSS のセーフリスト機能について詳しく説明し、特定のスタイルをホワイトリストに登録する方法を学び、セーフリストの使用が役立つさまざまなシナリオを検討します。

1. Tailwind CSS の PurgeCSS を理解する

PurgeCSS は、プロジェクト ファイルで使用されているクラス名をスキャンし、未使用のクラス名を最終的な CSS ファイルから削除する強力なツールです。これにより、生成される CSS のサイズが大幅に削減され、アプリケーションの読み込みが高速化されます。

デフォルトでは、Tailwind CSS には、HTML、JavaScript、および Vue ファイルのクラス名をスキャンする PurgeCSS 構成が含まれています。構成ファイルのコンテンツ配列内でどのファイルを選択するかを簡単に調整できます。

状況によっては、ファイル内で特定のスタイルが検出されない場合でも、特定のスタイルが削除されないようにする必要がある場合があります。ここでセーフリスト機能が活躍します。

2. セーフリストの導入

セーフリストは、特定のスタイルをホワイトリストに登録して、パージ プロセス中に削除されないようにする Tailwind CSS の機能です。これは、JavaScript を通じて生成された動的クラス名がある場合、またはユーザー操作に基づいて適用された動的クラス名がある場合に特に便利です。セーフリストのもう 1 つの非常に一般的な使用例は、色またはスタイルが CMS またはバックエンド フレームワークから駆動される場合です。そのような例の 1 つは、Web サイト管理者が CMS 内のカテゴリの色を編集できるようにするシステムであり、これにより、そのカテゴリのナビゲーション項目の色が変更されます。ファイルには色を出力するサーバー側コードが含まれるため、Tailwind では実際のクラス名は表示されません。

これらのクラス名をセーフリストに追加すると、PurgeCSS がプロジェクト ファイル内でクラス名を見つけられるかどうかに関係なく、それらのクラス名が常に最終的な CSS ファイルに含まれるようになります。

3. tailwind.config.js でのセーフリストの構成

Tailwind CSS プロジェクトでセーフリストを構成するには、tailwind.config.js ファイルを変更する必要があります。セーフリストは、プロジェクト ファイル内に見つからない場合でも、最終的な CSS ファイル内に保持したいクラス名の配列です。以下は、クラス名をセーフリストに追加する方法の例です:

// tailwind.config.js
module.exports = {
  content: [
    // your content files here
  ],
  safelist: [
    'bg-red-500', 
    'text-white', 
    'hover:bg-red-700'
  ],  
  // other configurations
};

この例では、bg-red-500、text-white、および hover:bg-red-700 クラスがセーフリストに追加されます。これらのクラスは、PurgeCSS がプロジェクト ファイル内で見つからない場合でも、最終的な CSS ファイルに常に含まれます。

4. より高度な構成

セーフリスト内で管理するクラスが多数ある場合、おそらく複数の色や、:hover、:focus、:active、dark: などのバリアント/修飾子をサポートする必要があるため、すぐに管理が非常に困難になる可能性があります。これらはセーフリスト内にあります。リストはすぐに膨大になります。

そこでパターンが登場します。Tailwind はセーフリスト内の正規表現をサポートします。

safelist: [
  {
    pattern: /from-(blue|green|indigo|pink|orange|rose)-200/
  },
  {
    pattern: /to-(blue|green|indigo|pink|orange|rose)-100/,
  },
],

これら 2 つのエントリにより、実質的に 12 クラスが追加されます。 from-{color}-200 および to-{color}-100。ここで、{color} はリスト内のすべての色です。リストの管理が非常に簡単になります。 tailwind.config.js は単なる JavaScript ファイルであるため、頻繁に繰り返される色のリストを管理する場合は、ファイルの先頭で変数を管理できることに注意してください。

正規表現で明示的にリストする必要がなく、リスト内のすべてのバリアントを定義することもできます。

safelist: [
  {
    pattern: /text-(blue|green|indigo|pink|orange|rose)-(600|400)/,
    variants: ['hover'],
  },
  {
    pattern: /from-(blue|green|indigo|pink|orange|rose)-200/
  },
  {
    pattern: /to-(blue|green|indigo|pink|orange|rose)-100/,
  },
],

5. セーフリストの例と使用例

セーフリスト機能の使用が役立つシナリオがいくつかあります。

動的クラス名: 一部のデータまたはユーザー入力に基づいてクラス名を動的に生成している場合、PurgeCSS はこれらのクラスを検出せず、最終的な CSS ファイルから削除する可能性があります。これらの動的クラスをセーフリストに追加すると、アプリケーション内で常に使用できるようになります。

// Example of a dynamic class name based on user input
const userInput = 'success'; // This value might come from an API or user input
const alertClass = `alert-${userInput}`;

// Generated class name: 'alert-success'

この例では、alertClass 変数は、ユーザー入力または API からのデータに基づいてクラス名を生成します。 PurgeCSS はこの動的クラス名を検出できないため、tailwind.config.js ファイルのセーフリストに追加する必要があります。

Conditional styles: If you have styles that only apply under specific conditions, such as a dark mode or a mobile view, you can use the safelist to ensure those styles are always included in your final CSS file.

// Example of a conditional style based on a media query
@media (max-width: 767px) {
  .hidden-mobile {
    display: none;
  }
}

In this example, the hidden-mobile class is only applied when the viewport width is less than 768 pixels. Since this class might not be detected by PurgeCSS, you should add it to the safelist in your tailwind.config.js file.

6. Best Practices for Safelisting

When using the safelist feature in Tailwind CSS, keep the following best practices in mind:

• Only add classes to the safelist that are truly necessary. Adding too many classes can bloat your final CSS file and negate the benefits of PurgeCSS.
• If you have many dynamic class names or a complex application, consider using a function or regular expression to generate the safelist array. This can help keep your configuration cleaner and more maintainable.
• Test your production build to ensure that all required styles are included. This can help you catch any issues early on and avoid surprises when deploying your application.

Summary

The safelist feature in Tailwind CSS provides a powerful way to whitelist specific styles and ensure they are included in your final CSS file, even if they are not detected by PurgeCSS. By understanding how to configure the safelist and use it effectively in various scenarios, you can make your Tailwind CSS projects more robust and maintainable. Remember to follow best practices when using the safelist to ensure your final CSS file remains lean and performant.

Feel free to look over the Tailwind Docs on Safelist usage.

以上がTailwinds の「safelist」を使用して動的クラスを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。