Tailwind CSS v2.1

新增功能

Tailwind CSS v2.1.0

Tailwind CSS v2.1 新增了以下功能：

簡單來說，啟用 Just-in-Time Mode，可以讓我們在開發環境中使用 PurgeCSS，大大減少了編譯時間，並且保持開發與生產環境的一致性。

在設定檔中啟用：

1
2
3
4
5


// tailwind.config.js
module.exports = {
  mode: 'jit',
  // ...
}

出於檔案大小的考慮，預設情況下並非對所有的功能類別都啟用了狀態 variant。但在 Just-in-Time Mode 下，再也不需要擔心體積和速度問題，可以直接使用所有 variant。

例如，fontSize 預設情況下，只支援 responsive，若使用 hover variant 需要自己擴增：

1
2
3
4
5
6
7
8
9


module.exports = {
  theme: {},
  variants: {
    extend: {
      fontSize: ['hover'],
    },
  },
  plugins: [],
};

Tailwind Play Demo：未開啟 JIT Mode

若啟用 Just-in-Time Mode 可以直接使用。

Tailwind Play Demo：開啟 JIT Mode

不需要定義 CSS 即可生成樣式。

範例：

1

<div class="w-[88px] h-[3.33rem] bg-[#B95754]"></div>

Tailwind Play Demo：開啟 JIT Mode

這對於一些特殊尺寸、顏色的樣式非常方便，不需要額外為它們生成樣式。

教學：