實用優先的框架幫助我們更快地設計網頁，Tailwind CSS已成為最受歡迎的框架之一。但受歡迎並不意味著完美。
使用Tailwind CSS存在一些挑戰，例如在開發過程中擁有龐大的樣式表以及必須自己啟用額外的變體等等。解決其中一些挑戰將是我們在本教程中的重點。
在本教程中，我們將討論Tailwind CSS框架的一個非常重要的特性，即即時編譯器，通常稱為JIT編譯器。
我們將重點介紹使用Tailwind CSS JIT編譯器的特性和優勢、如何啟用它，並檢視一些實際示例。
- 什麼是Tailwind CSS JIT（即時）編譯器？
- 使用Tailwind CSS JIT模式的好處
- 使用Tailwind CSS JIT編譯器的缺點
- 如何啟用Tailwind CSS JIT模式
- 如何使用Tailwind CSS JIT編譯器
- Tailwind CSS版本3中的JIT模式
什麼是Tailwind CSS JIT（即時）編譯器？
在談論即時編譯器之前，我們首先需要談談Tailwind CSS。
Tailwind CSS是一個實用程式優先的CSS框架，帶有一組預定義的CSS類，可以直接應用在我們的標記中，以加快網頁的設計並使用預定義的系統保持設計的一致性。
在釋出JIT編譯器之前，我們在安裝後生成的Tailwind CSS檔案大小通常高達3MB。但是，隨著您繼續配置和自定義Tailwind，檔案大小會越來越大 — 在某些情況下，您最終可能會得到一個15MB的樣式表。
儘管我們所有未使用的樣式將在生產過程中被清除，但在開發過程中並非如此。對於10MB甚至20MB的樣式表，我們必然會遇到問題並導致我們的開發工具滯後。
使用JIT編譯器，在我們構建專案時會生成樣式。這意味著只有您當前使用的實用程式類將包含在樣式表的大小中，而不是Tailwind CSS附帶的所有實用程式類。
使用Tailwind CSS JIT模式的好處
在本節中，我們將討論使用JIT編譯器的一些好處。它們包括：
- 您的樣式表在開發和生產中是相同的。
- 更快的構建時間。
- 預設情況下啟用所有變體。
- 開發期間的編譯速度要快得多。
- 只生成使用過的樣式。
- 變體可以堆疊。
- 改進了開發工具的效能。
使用Tailwind CSS JIT編譯器的缺點
根據JIT編譯器GitHub文件，當前已知的限制是：
- 不支援高階PurgeCSS選項。
- “您只能使用屬於核心、由外掛生成或在
@layer規則中定義的@apply類。您不能隨意使用未在@layer規則中定義的CSS類@apply。” - 僅支援PostCSS 8。
@apply指令用於在我們的自定義CSS中應用實用程式類。當我們定義自定義 CSS 樣式但更喜歡使用一些已經定義的實用程式類時，這很有用。這是@apply指令如何工作的示例：
.my-custom-css {
@apply text-green-500;
}
在上面的程式碼中，我們為自定義CSS類新增了綠色。綠色是使用Tailwind實用程式類應用的。
如何啟用Tailwind CSS JIT模式
請注意，在撰寫本文時，Tailwind CSS版本3已經發布，並且在您安裝Tailwind CSS時預設啟用。以下關於啟用JIT編譯器的說明不適用於版本3及更高版本。本教程中涵蓋的所有其他示例都與版本3相容。
啟用JIT編譯器非常容易。您所要做的就是通過新增應該具有“jit”值的mode屬性來更新您的tailwind.config.js檔案。
以下是您的tailwind.config.js的外觀：
module.exports = {
mode: 'jit',
purge: ['./public/*.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
要關注的行是我們新增的部分：
mode: 'jit'
這使我們能夠使用JIT編譯器的功能。
完成後，您可以執行build命令並檢視檔案大小減小。您將看到的唯一樣式將是您正在使用的樣式。
隨著檔案大小的減小，您在開發和生產期間的樣式表將是相同的。開發人員工具滯後的可能性也將降至最低，並且您的程式碼在構建專案時編譯得更快。
接下來，我們將看到JIT編譯器的一些實際應用。
這使我們能夠使用JIT編譯器的功能。
完成後，您可以執行build命令並檢視檔案大小減小。您將看到的唯一樣式將是您正在使用的樣式。
隨著檔案大小的減小，您在開發和生產期間的樣式表將是相同的。開發人員工具滯後的可能性也將降至最低，並且您的程式碼在構建專案時編譯得更快。
接下來，我們將看到JIT編譯器的一些實際應用。
如何使用Tailwind CSS JIT編譯器
我們將在本節中看到一些JIT編譯器的實際示例。我們將從幫助我們擴充套件Tailwind設計系統的任意值開始。
任意值
可能會出現我們寧願使用已經建立的設計系統之外的值的情況。這些值可能用於我們的顏色、填充、邊距、寬度等。
JIT編譯器使我們能夠通過使用任意值來實現這一點。這些任意值允許我們突破設計系統並定義我們自己的自定義值。您會在以下語法中看到這些值：[300px]、[#FA8072]。
為此，我們必須將值巢狀在方括號中，以便 Tailwind 知道我們正在設計系統中定義新值。下面是一個示例：
<div class="mt-[300px] w-[500px]"> </div>
在上面的示例中，我們使用了兩個新值——300px 和 500px——最初在設計系統中並不存在。在JIT編譯器之前，您可能必須首先在config.js檔案中定義這些值才能達到同樣的效果。
下一個示例顯示瞭如何將新顏色值定義為：
<p class="bg-[#FA8072] ">This paragraph has a salmon background </p>
在這裡，我們建立了一個帶有鮭魚背景顏色的段落。您不會看到顯示bg-salmon的Tailwind實用程式類，但我們可以使用任意值來定義它。
可堆疊變體
使用JIT編譯器，預設情況下會啟用所有變體，因此您可以忘記使用config.js檔案來啟用任何變體。除此之外，可以堆疊變體以實現出色的結果。
每個變體由冒號分隔。
這是一個例子：
<button class="sm:dark:disabled:focus:hover:bg-blue-300">
上面的程式碼建立了一個禁用焦點屬性的按鈕，並在懸停時變為藍色。
偽元素
JIT編譯器允許我們設定偽元素的樣式。偽元素用於設定元素的特定部分的樣式，例如設定元素的第一個字母的樣式或在元素之前/之後插入內容。
這裡有一些例子：
<p class="first-letter:bg-green-600"> First letter will have a green color </p>
在上面的示例中，第一個字母“M”將具有綠色。
<p class="selection:bg-green-600"> Highlight this text to see a green color. </p>
當您突出顯示上面程式碼中的文字時，它將具有綠色背景色。
每邊邊框顏色
由於檔案大小的考慮，這個特性最初被忽略了，但是隨著 JIT 編譯器的釋出而改變。我們可以給每個邊框一個不同的顏色。
讓我們看一個例子：
<div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400"> </div>
我們為div賦予了多種邊框顏色——上邊框為紅色，右邊框為藍色，下邊框為黃色，左邊框為綠色。
Tailwind CSS版本3中的JIT模式
從Tailwind CSS版本3及更高版本開始，我們在安裝Tailwind CSS時預設啟用JIT編譯器，因此我們不必擔心更改tailwind.config.js檔案中的任何內容。這使我們能夠隨時隨地訪問JIT編譯器的所有功能。我們所要做的就是按照當前版本的安裝說明進行操作，然後我們就可以開始執行了。
概括
JIT編譯器將Tailwind CSS框架提升到了一個全新的水平。它的釋出附帶了新的有用功能，使我們更好地使用該框架。我們不再需要擔心我們的檔案太大而導致我們的開發工具滯後，因為只有我們實際使用的樣式會生成，一切都在進行中。
我們看到了一些新特性的例子，比如堆疊變體、使用偽元素對元素進行樣式設定、使用任意值來擴充套件我們的設計系統以及非常需要的特性——分別為元素邊框的每一側設定樣式的能力。我們還遠遠沒有達到Tailwind的JIT功能的限制，因此您接下來的步驟將是自己測試並探索如何最好地利用JIT的功能進行自己的工作。
評論留言