更新：從 Tailwind CSS v2.1 開始，新的即時編譯引擎已直接包含在 Tailwind CSS 本身中，因此您不再需要 @tailwindcss/jit 套件。 請在文件中了解更多資訊。
多年來，我們在改進 Tailwind CSS 時所必須處理的最困難的限制之一，就是開發過程中產生的檔案大小。如果對設定檔進行足夠的自訂，產生的 CSS 可能會達到 10MB 或更大，而建置工具甚至瀏覽器本身能夠舒適地容忍的 CSS 量也是有限的。
因此，您一直都必須小心對設定檔進行昂貴的變更，例如新增過多的額外斷點或啟用額外的變體，例如 disabled 或 focus-visible。
今天，我非常興奮地分享我們一直在開發的新專案，這個專案讓這些考慮成為過去式：Tailwind CSS 的即時編譯器。
@tailwindcss/jit 是一個新的實驗性程式庫，會在您撰寫範本檔案時按需編譯所有 CSS，而不是預先產生整個樣式表。
這帶來了許多優點
- 閃電般快速的建置時間。Tailwind 使用我們的 CLI 進行初始編譯可能需要 3–8 秒，而在 webpack 專案中則需要 30–45 秒以上，因為 webpack 無法處理大型 CSS 檔案。無論您使用什麼建置工具，這個程式庫都可以在大約 800 毫秒內編譯最大的專案（增量重建速度快至 3 毫秒）。
- 預設啟用每個變體。由於檔案大小的考量，通常預設不會啟用
focus-visible、active、disabled等變體。由於此程式庫會按需產生樣式，因此您可以隨時使用任何想要的變體。您甚至可以像sm:hover:active:disabled:opacity-75一樣堆疊它們。永遠不用再設定變體。 - 產生任意樣式，無需撰寫自訂 CSS。是否曾經需要一些不屬於您的設計系統的超特定值，例如用於古怪背景圖片的
top: -113px？由於樣式是按需產生的，因此您可以使用方括號表示法（例如top-[-113px]）來產生所需的工具。也適用於變體，例如md:top-[-113px]。 - 您的 CSS 在開發和生產中都是相同的。由於樣式是按需產生的，因此您無需為生產環境清除未使用的樣式，這表示您在所有環境中看到的 CSS 都是完全相同的。永遠不用擔心在生產環境中意外清除重要的樣式。
- 開發中更好的瀏覽器效能。由於開發版本與生產版本一樣小，因此瀏覽器不必剖析和管理多個 MB 的預先產生的 CSS。在具有大量擴充設定的專案中，這可以讓開發工具更快速地回應。
立即安裝 @tailwindcss/jit 並將其交換到您的 PostCSS 設定中來試試看
npm install -D @tailwindcss/jit tailwindcss postcss autoprefixer// postcss.config.jsmodule.exports = { plugins: { "@tailwindcss/jit": {}, autoprefixer: {}, },};我們目前將其作為獨立程式庫發布，但是一旦我們解決了所有問題，我們將會將其直接放回 tailwindcss 中，並置於組態選項之後，我們的目標是在今年稍後的 Tailwind CSS v3.0 中將其設為預設值。
在 GitHub 上了解更多有關專案的資訊，然後安裝它、試用它、扭曲它、打破它，並告訴我們您的想法！
準備好試試看了嗎？ 開始使用 →