亞當·瓦森（Adam Wathan）（非常巧妙地）使用CSS級聯(lián)層實施了逆風，這使得基於優(yōu)先級管理樣式非常有效。

 <code>@layer theme, base, components, utilities; @import 'tailwindcss/theme.css' layer(theme); @import 'tailwindcss/utilities.css' layer(utilities);</code>

尾風的基礎在於其公用事業(yè)課程。這意味著您有兩個選擇：

1. 標準選項
2. 非常規(guī)的選擇

標準選項

Tailwind推薦的方法是通過首先放置組件和實用程序來組織層順序。

因此，當構建可重複使用的組件時，您需要在@Layer指令中手動包裝它們。然後，使用尾風實用程序覆蓋組件樣式，有效地將尾風視為“最重要的層”。

 <code>/* Define your components */ @layer components { .component { /* Your custom CSS here */ } }</code>

 <code>...</code>

那是管理事物的堅實方法。

但是，作為我的叛逆類型，我並不總是堅持默認方法。經(jīng)過一年多的逆風和本地CSS進行了一次大規(guī)模的實驗，我發(fā)現(xiàn)我認為是一種改進的方法。

非常規(guī)的選擇

在我們繼續(xù)之前，我應該提到我目前正在寫一門名為“非正統(tǒng)”的課程 - 它涵蓋了我所知道的有關以強大的方式結合尾風和CSS的所有知識，這是從兩者的優(yōu)勢中汲取的。

有了無恥的插頭，讓我們探索非常規(guī)的選擇。

在這種情況下，替代方法涉及將您的CSS寫入未命名的層或公用事業(yè)之後的任何層 - 以便您的樣式自然地覆蓋了尾風效用類別。

其中，我個人更喜歡未命名的層方法：

 <code>/* Using an unnamed layer */ @layer theme, base, components, utilities;</code> /<em>直接在這裡寫下您的CSS</em> / 
。成分 { / <em>...</em> / }

 <code>/<em> Or using a named layer</em> / /<em> You can choose any name. Here I used "css" for clarity</em> / @layer theme, base, components, utilities, css;</code><p> @Layer CSS {
。成分 { / <em>...</em> / }
}</p>

這是我這樣做的一些原因：

1. 除非絕對必要，否則我避免添加額外的層 - 它會減少擊鍵和心理開銷。
2. 我對ITCS，選擇器特異性和其他經(jīng)典前端技術感到滿意，因此單層處理CSS很自然。
3. 我可以處理純CSS中的主題和動畫等複雜的任務，僅尾風很難或不可能。

當然，您的經(jīng)驗可能會有所不同。

現(xiàn)在，如果您到目前為止遵循了我的邏輯，您會注意到我使用的尾風非常不同：

• 尾風實用程序不是“最高優(yōu)先級”層。
• 我的自定義CSS層優(yōu)先。

這使我可以：

• 迅速使用逆風的原型（快速有效，尤其是使用我構建的工具）。
• 一旦CSS變得過於復雜，將復雜的樣式移動到CSS中- 避免了雜亂無章的HTML，充滿了使我的胃轉彎的公用事業(yè)課程。不是因為公用事業(yè) - 首先HTML本質上是不好的，而是因為它需要更多的認知努力來解析。

這是在公用事業(yè)層中發(fā)揮風風的整齊好處：我可以隨時申請！對公用事業(yè)班的重要性很重要，以提高其強度。

 <code>...</code>

等一下！這不是不正確嗎？

並不真地。從歷史上看，！在這種情況下，我們會利用CSS層中的重要功能將尾風實用程序提升到未命名層中任何CSS之上。

此行為是完全有效的，並且是CSS層規(guī)範的一部分。

此外，由於！重要的是明確使用且很少使用，因此它可以很好地替代，無需創(chuàng)建全新的選擇器即可快速覆蓋。

尾風的實用程序比出現(xiàn)更通用

尾風實用程序不僅是類和CSS屬性之間的一對一映射。大多數(shù)人看起來都是為簡單起見的，這可能會導致誤解。

尾風實用程序的功能更像方便的Sass Mixins，這意味著我們可以通過它們構建用於佈局，主題，排版等的強大工具。

您可以在非正統(tǒng)的尾風中探索這些高級想法。

感謝您的閱讀，我希望這對您如何看待（或使用）逆風來打開新的視角！

以上是將CSS級聯(lián)層與尾風實用程序的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！