到了最後跟大家分享一個最佳化的方式，可以把我們的 css 檔案再縮小；以及 JIT 模式，JIT 模式在 tailwind v3.0 開始可說是非常好用，let's go

這裡說明如何進行最佳化，由於我們是安裝 tailwind-cli 所以會選擇 minify 的方式

npx tailwindcss -o build.css --minify

我們可以將上述的程式碼加入到 package.json 的 scripts 中，方便操作

"scripts": {
    "prod": "npx tailwindcss -o ./dist/css/build.css --minify"
  },

在 vscode 的終端機輸入以下程式碼

npm run prod

這是我們這次使用的 css 輸入檔案

帶大家看一下最佳化前後的差異，此次最佳化 css 檔案大概是輕量 33% 左右

最佳化前


28 kb 的檔案，大約一千多行的程式碼
最佳化後


19 kb 的檔案，全部濃縮成一行

再來是將 HTML 的讀取路徑修改

<link rel="stylesheet" href="../dist/css/build.css" />

如此一來就得到可上線的 css 檔案了～

下一個是 JIT 模式，其實 JIT 可以用在很多地方，這邊大概舉例間距 (margin、padding)，其使用方法是我們在檢視設計稿後，一些不重複的數值或是 magic number ，而我們不想為了全部設計稿中只出現一次或兩次的數值進行客製化，那這時候就可以使用 JIT，使用方式會在該樣式的最下方。

<div class="m-[5px] p-[21px]">
    ...
</div>

可以直接在 HTML 使用，v3 之後不需做額外設定，是不是很好用呢？不過這真的只能用在極少數出現的數值中，不建議因為偷懶而一直使用 JIT。