Vue-Cli 4 + Tailwind JIT 專案建置

把 vue-cli 4 全域安裝

npm install -g @vue/cli

然後在你要放置專案的地方執行：

vue create [專案名稱]

# 或是
npx create [專案名稱]

比如

vue create vuecli-tailwind-jit

# 或是
npx vue create vuecli-tailwind-jit

然後按上下方向鍵來到選擇你要安裝的 Vue 版本

# vue 2.x
Default ([Vue 2] babel, eslint)

# vue 3.x
Default (Vue 3) ([Vue 3] babel, eslint)

建好之後，他會提示你說切換到專案裡面執行指令來開啟 server，那他應該會顯示你的專案名稱，像我這邊呢就是：

cd vuecli-tailwind-jit
npm run serve

不過這邊只要先進到資料夾中，還不用開啟 dev server。
我們還要安裝其它東西。

安裝 Tailwind

開始安裝 tailwind 和相關所需的東西。

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat autoprefixer@^9 cross-env

若原本已經裝好 tailwind 的專案，為了開啟 jit 並使其順利運作，則是多安裝這個就好，不須重新安裝一次 tailwind，接著跳到修改配置檔繼續跟著設定。

npm install -D cross-env

設定 Tailwind

產生配置檔

上面這些東西都安裝完，我們就要執行指令來產生設定檔：

npx tailwindcss init -p --jit

修改配置檔

接著開啟 tailwind.config.js 設定 purge 監聽的文件範圍：

module.exports = {

  /* 原本沒有開啟 jit 的人，多加這句 */
  mode: 'jit',
  
  /* 把 purge:[] 改成下面這樣 */
  purge: [
    './public/**/*.{html}',
    './src/**/*.{vue,js,ts,html}'
  ],

  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  plugins: [],
}

使用 CSS

接著，到 ./src 資料夾中新增一個檔案 index.css，並新增以下內容：

@tailwind base;
@tailwind components;
@tailwind utilities;

然後一起修改 ./src 資料夾中的 main.js，增加一行 css 檔的引用：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'   // ← ← ← 新增這行

createApp(App).mount('#app')
...

然後

終於到最後步驟了，開啟專案根目錄的 package.json，並把指令修改如下：

  "scripts": {
    "serve": "cross-env TAILWIND_MODE=watch vue-cli-service serve",
    "build": "cross-env TAILWIND_MODE=build vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

使用 Tailwind

上面步驟確實都有做到，就可以開啟伺服器了。

執行 npm run serve 之後，會看到他給你一個網址讓你可以瀏覽你剛剛建立的網站 (你們會因為電腦的 ip 跟我不同而在 Network 部分顯示不同的網址)

執行了之後，就可以去瀏覽網站了！ http://localhost:8080/
畫面大概會長這樣：

看到他跑版就可以確定我們的 Tailwind 已經生效啦！
現在趕快寫幾句 tailwind 並案下儲存來享受 jit 的即時更新吧！