レガシープロジェクト用のTailwindクラスプレフィックス

Bootstrapやカスタムスタイルシートなどの既存CSSフレームワークとの名前競合を避けるために、Tailwind CSSユーティリティにクラスプレフィックスを追加します。

General

詳細な説明

クラスプレフィックス設定

既にCSSクラスを持つ既存プロジェクトにTailwindを統合する際、名前の競合が発生する可能性があります。prefixオプションでこれを防ぎます。

プレフィックスの設定

tw-のようなプレフィックスを設定すると、すべてのTailwindユーティリティクラス名の前に付加されます。

一般的なユースケース

  1. Bootstrap移行: Bootstrapと競合せずにTailwindを追加
  2. WordPressテーマ: WordPress管理スタイルとの競合を回避
  3. マイクロフロントエンド: モジュール内でTailwindスタイルを分離

プレフィックスを使わないべき場合

新規プロジェクトをゼロから始める場合、プレフィックスは不必要な冗長性を追加します。実際に解決すべき競合がある場合のみ使用してください。

ユースケース

Bootstrap、Foundation、または競合する可能性のあるクラス名を持つ他のCSSフレームワークを既に使用しているプロジェクトにTailwind CSSを統合する際にクラスプレフィックスを使用してください。

試してみる — Tailwind Config Builder

フルツールを開く