ユーティリティ クラスが XNUMX つのことだけを行う場合、他の場所からのスタイルによってオーバーライドされたくない可能性があります。 XNUMXつのアプローチは、使用することです !important 特異性の競合に関係なく、スタイルが適用されることを 100% 確実にします。
Tailwind 構成ファイルには、 !important 自動的に追加されるオプション !important すべてのユーティリティ クラスに。 使う分には問題ありません !important この方法ですが、最近では特異性を処理するためのより良い方法があります。 使用する CSSカスケードレイヤー 使用するという面倒なアプローチを避けることができます !important.
カスケード レイヤーを使用すると、スタイルを「レイヤー」にグループ化できます。 レイヤーの優先順位は、常にセレクターの特異性よりも優先されます。 特異性は、各レイヤー内でのみ重要です。 適切なレイヤー順序を確立することで、スタイルの競合や特異性戦争を回避できます。 それが、CSS Cascade Layers を優れたツールにしている理由です。 サードパーティ フレームワークのスタイルと一緒にカスタム スタイルを管理する、Tailwind のように。
Tailwind のソース .css ファイルは通常、次のように始まります。
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;を見てみましょう Tailwind の公式ドキュメント ディレクティブについて:
ディレクティブは、Tailwind CSS プロジェクトに特別な機能を提供する CSS で使用できるカスタム Tailwind 固有の @ 規則です。 使用
@tailwindTailwind を挿入するディレクティブbase,components,utilities&variantsスタイルを CSS に追加します。
ビルドされた出力 CSS ファイルで、Tailwind の CSS リセット — として知られる プリフライト — 基本スタイルの一部として最初に含まれます。 残りの base Tailwind が機能するために必要な CSS 変数で構成されます。 components 独自のカスタム クラスを追加する場所です。 マークアップで使用したユーティリティ クラスが次に表示されます。 バリアントは、ホバー状態やフォーカス状態、レスポンシブ スタイルなどのスタイルであり、生成された CSS ファイルの最後に表示されます。
追い風 @layer 指令
紛らわしいことに、Tailwind には独自の @layer 構文。 この記事は CSS 標準に関するものですが、Tailwind バージョン (コンパイルされてしまい、最終的に出力 CSS に含まれない) について簡単に見てみましょう。 追い風 @layer ディレクティブは、出力 CSS ファイルの指定された部分に独自の追加スタイルを挿入する方法です。
たとえば、独自のスタイルを base スタイルでは、次のようにします。
@layer base {
h1 {
font-size: 30px;
}
} components layer はデフォルトでは空です — 独自のクラスを置くための場所です。 Tailwind の方法で物事を行っていた場合は、おそらく次を使用するでしょう。 @apply （ただし、最近 Tailwind の作成者 それに対して助言した)、しかし、通常の方法でクラスを書くこともできます:
@layer components {
.btn-blue {
background-color: blue;
color: white;
}
}CSS 標準は、はるかに強力です。 それに戻りましょう…
CSS 標準の使用 @layer
CSS標準を使用するためにこれを書き直す方法は次のとおりです @layer:
@layer tailwind-base, my-custom-styles, tailwind-utilities;
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-utilities {
@tailwind utilities;
@tailwind variants;
} Tailwind ディレクティブとは異なり、これらはコンパイルされません。 それらはブラウザによって理解されます。 実際、Edge、Chrome、Safari、Firefox の DevTools では、定義したレイヤーも表示されます。
レイヤーはいくつでも作成でき、好きな名前を付けることができますが、この例では、すべてのカスタム スタイルが XNUMX つのレイヤーにあります (my-custom-styles）。 最初の行はレイヤーの順序を確立します。
@layer tailwind-base, my-custom-styles, tailwind-utilities;これは事前に提供する必要があります。 を使用する他のコードの前に、必ずこの行を含めてください。 @layer. リストの最初のレイヤーは 最低 リストの最後のレイヤーが 最も パワフル。 つまり tailwind-base は 最も弱い レイヤーとその中のコードは、後続のすべてのレイヤーによってオーバーライドされます。 ということも tailwind-utilities 常に他のスタイルよりも優先されます — ソースの順序や特異性に関係なく. (ユーティリティとバリアント 可能性 別々のレイヤーに入りますが、Tailwind のメンテナーは、ユーティリティ ディレクティブの下にバリアントを含める限り、バリアントが常にユーティリティよりも優先されるようにします)。
レイヤーにないものはすべて、レイヤーにあるものをオーバーライドします (XNUMX つの例外は、使用するスタイルです)。 !important）。 だから、あなたも去ることを選ぶことができます utilities & variants 任意のレイヤーの外側:
@layer tailwind-base, tailwind-components, my-custom-styles;
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-components {
@tailwind components;
}
@tailwind utilities;
@tailwind variants;これは実際に私たちに何をもたらしましたか？ 高度な CSS セレクターが非常に便利な場合がたくさんあります。 のバージョンを作成しましょう :focus-within を使用したマウス クリックではなく、キーボード フォーカスにのみ応答します。 :has セレクター（Chrome 105に着陸する）。 これは、その子のいずれかがフォーカスを受け取ると、親要素のスタイルを設定します。 Tailwind 3.1 の導入 カスタムバリアント —例 <div class="[&:has(:focus-visible)]:outline-red-600"> — ただし、CSS を記述する方が簡単な場合もあります。
@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
@tailwind base;
}
@tailwind utilities;
@layer my-custom-styles {
.radio-container {
padding: 4px 24px;
border: solid 2px rgb(230, 230, 230);
}
.radio-container:has(:focus-visible) {
outline: solid 2px blue;
}
}たった XNUMX つのインスタンスで、 outline-color から blue 別のものに。 作業している要素に Tailwind クラスと .outline-red-600 そして私たち自身 .radio-container:has(:focus-visible) クラス：
<div class="outline-red-600 radio-container"> ... </div>どの outline-color 勝つでしょう？
通常、特異性が高いほど .radio-container:has(:focus-visible) Tailwind クラスは効果がないことを意味します — ソースの順序が低い場合でも。 しかし、追い風とは違って @layer CSS 標準のソース順序に依存するディレクティブ @layer 特異性を覆します。
その結果、独自のカスタム スタイルで複雑なセレクターを使用できますが、必要に応じて Tailwind のユーティリティ クラスでそれらをオーバーライドすることができます。 !important 欲しいものを手に入れるための使い方。
