掌握 Tailwind CSS 及其即時 (JIT) 模式

已發表: 2022-04-23

實用優先的框架幫助我們更快地設計網頁，Tailwind CSS 已成為最受歡迎的框架之一。 但受歡迎並不意味著完美。

使用 Tailwind CSS 存在一些挑戰，例如在開發過程中擁有龐大的樣式表以及必須自己啟用額外的變體等等。 解決其中一些挑戰將是我們在本教程中的重點。

在本教程中，我們將討論 Tailwind CSS 框架的一個非常重要的特性，即即時編譯器，通常稱為 JIT 編譯器。

我們將重點介紹使用 Tailwind CSS JIT 編譯器的特性和優勢、如何啟用它，並查看一些實際示例。

讓我們開始吧。


什麼是 Tailwind CSS JIT（即時）編譯器？

在談論即時編譯器之前，我們首先需要談談 Tailwind CSS。

Tailwind CSS 是一個實用程序優先的 CSS 框架，具有一組預定義的 CSS 類，可以直接應用在我們的標記中，以加快網頁設計並使用預定義系統保持設計的一致性。

在發布 JIT 編譯器之前，我們在安裝後生成的 Tailwind CSS 文件大小通常高達 3 MB。 但是，隨著您繼續配置和自定義 Tailwind，文件大小會越來越大 — 在某些情況下，您最終可能會得到一個 15 MB 的樣式表。

儘管我們所有未使用的樣式將在生產過程中被清除，但在開發過程中並非如此。 對於 10 MB 甚至 20 MB 的樣式表，我們必然會遇到問題並導致我們的開發工具滯後。

使用 JIT 編譯器，在我們構建項目時會生成樣式。 這意味著只有您當前使用的實用程序類將包含在樣式表的大小中，而不是 Tailwind CSS 附帶的所有實用程序類。

使用 Tailwind CSS JIT 模式的好處

在本節中，我們將討論使用 JIT 編譯器的一些好處。 它們包括：

  1. 您的樣式表在開發和生產中是相同的。
  2. 更快的構建時間。
  3. 默認情況下啟用所有變體。
  4. 開發期間的編譯速度要快得多。
  5. 只生成使用過的樣式。
  6. 變體可以堆疊。
  7. 改進了開發工具的性能。

使用 Tailwind CSS JIT 編譯器的缺點

根據 JIT 編譯器 GitHub 文檔，當前已知的限制是：

  • 不支持高級 PurgeCSS 選項。
  • “您只能@apply屬於核心的類、由插件生成或在@layer規則中定義的類。 您不能@apply未在@layer規則中定義的任意 CSS 類。”
  • 僅支持 PostCSS 8。

@apply指令用於在我們的自定義 CSS 中應用實用程序類。 這在我們定義自定義 CSS 樣式但更喜歡使用一些已經定義的實用程序類時很有用。下面是@apply指令如何工作的示例：

 .my-custom-css { @apply text-green-500; }

在上面的代碼中，我們為自定義 CSS 類添加了綠色。 綠色是使用 Tailwind 實用程序類應用的。

在這個有用的指南中了解 Tailwind CSS 框架的一個非常重要的特性，即即時編譯器。 點擊推文

如何啟用 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: [], }

要關注的行是我們添加的部分：

 模式：'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 實用程序類，但我們可以使用任意值來定義它。

因停機時間和 WordPress 問題而苦苦掙扎？ Kinsta 是旨在節省您時間的託管解決方案！ 查看我們的功能

可堆疊變體

使用 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 編譯器...以及它如何增強您的網站？ 本指南有答案點擊鳴叫

概括

JIT 編譯器將 Tailwind CSS 框架提升到了一個全新的水平。 它的發布附帶了新的有用功能，使我們更好地使用該框架。 我們不再需要擔心我們的文件太大而導致我們的開發工具滯後，因為只有我們實際使用的樣式會生成，一切都在進行中。

我們看到了一些新特性的例子，比如堆疊變體、使用偽元素對元素進行樣式設置、使用任意值來擴展我們的設計系統以及非常需要的特性——分別為元素邊框的每一側設置樣式的能力。 我們還遠遠沒有達到 Tailwind 的 JIT 功能的限制，因此您接下來的步驟將是自己測試並探索如何最好地利用 JIT 的功能進行自己的工作。

您使用 JIT 編譯器構建了哪些很酷的東西？ 在下面的評論中分享您的想法。