Tailwind CSS 是一種流行的實用程式優先 CSS 框架，可讓開發人員快速且有效率地建立自訂設計。預設情況下，Tailwind CSS 會產生各種實用程式類，這可能會導致檔案大小過大。為了解決這個問題，Tailwind CSS 配備了一個名為 PurgeCSS 的內建功能，可以從生產版本中刪除未使用的樣式，從而使最終的 CSS 檔案更小、效能更高。但是，當在應用程式中動態或有條件地使用某些樣式時，這種自動刪除有時可能會導致問題。在本文中，我們將深入探討 Tailwind CSS 中的安全清單功能，了解如何將特定樣式列入白名單，並探索使用安全清單會有所幫助的各種場景。
PurgeCSS 是一個強大的工具，可以掃描專案文件中使用的任何類別名，並從最終的 CSS 檔案中刪除未使用的類別名稱。這顯著減少了生成的 CSS 的大小，使您的應用程式載入速度更快。
預設情況下，Tailwind CSS 包含 PurgeCSS 配置，可掃描 HTML、JavaScript 和 Vue 檔案中的任何類別名稱。您可以輕鬆調整在設定檔的內容陣列中擷取哪些檔案。
在某些情況下，您可能需要防止刪除特定樣式，即使在您的檔案中未偵測到它們。這就是安全清單功能發揮作用的地方。
安全清單是 Tailwind CSS 中的一項功能，可讓您將某些樣式列入白名單，以免它們在清除過程中被刪除。當您有透過 JavaScript 產生的動態類別名稱或基於使用者互動應用程式的動態類別名稱時，這特別有用。安全清單的另一個非常常見的用例是從 CMS 或後端框架驅動顏色或樣式。一個這樣的範例可能是一個系統，該系統允許網站管理員編輯 CMS 中類別的顏色，從而更改該類別的導航項目的顏色。 Tailwind 將看不到實際的類別名，因為該檔案將包含輸出顏色的伺服器端程式碼。
透過將這些類別名稱新增至安全性清單中，您可以確保它們始終包含在您的最終 CSS 檔案中，無論 PurgeCSS 是否可以在您的專案檔案中找到它們。
要在 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 和 hide:bg-red-700 類別已新增至安全性清單中。這些類別將始終包含在您的最終 CSS 檔案中，即使 PurgeCSS 在您的專案文件中找不到它們。
如果您在安全清單中有很多類別需要管理，可能是由於多種顏色以及需要支援變體/修飾符，例如: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/,
},
],
在多種情況下使用安全清單功能會很有幫助：
動態類別名稱：如果您根據某些資料或使用者輸入動態產生類別名稱，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.
When using the safelist feature in Tailwind CSS, keep the following best practices in mind:
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中文網其他相關文章！
