---
title: Vue-Cli 4 + Tailwind JIT 專案建置
tags: vue
description: "跟著筆記一步驟一步驟來做 Vue-Cli 4 + Tailwind JIT 專案建置"
---
Vue-Cli 4 + Tailwind JIT 專案建置
=
把 vue-cli 4 全域安裝
```batch=
npm install -g @vue/cli
```
然後在你要放置專案的地方執行：
```batch=
vue create [專案名稱]
# 或是
npx create [專案名稱]
```
比如
```batch=
vue create vuecli-tailwind-jit
# 或是
npx vue create vuecli-tailwind-jit
```
然後按上下方向鍵來到選擇你要安裝的 Vue 版本
```batch=
# vue 2.x
Default ([Vue 2] babel, eslint)
# vue 3.x
Default (Vue 3) ([Vue 3] babel, eslint)
```
建好之後，他會提示你說切換到專案裡面執行指令來開啟 server，那他應該會顯示你的專案名稱，像我這邊呢就是：
```batch=
cd vuecli-tailwind-jit
npm run serve
```
不過這邊只要先進到資料夾中，還不用開啟 dev server。
我們還要安裝其它東西。
<br>
安裝 Tailwind
--
開始安裝 tailwind 和相關所需的東西。
```batch=
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat autoprefixer@^9 cross-env
```
<br>
:::warning
**若原本已經裝好 tailwind 的專案，為了開啟 jit 並使其順利運作**，則是多安裝這個就好，不須重新安裝一次 tailwind，接著跳到[修改配置檔](#修改配置檔)繼續跟著設定。
<br>
```batch=
npm install -D cross-env
```
:::
<br>
設定 Tailwind
--
### 產生配置檔
上面這些東西都安裝完，我們就要執行指令來產生設定檔：
```batch=
npx tailwindcss init -p --jit
```
### 修改配置檔
接著開啟 ==tailwind.config.js== 設定 purge 監聽的文件範圍：
```javascript==
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==，並新增以下內容：
```css=
@tailwind base;
@tailwind components;
@tailwind utilities;
```
然後一起修改 `./src` 資料夾中的 ==main.js==，增加一行 css 檔的引用：
```javascript==
import { createApp } from 'vue'
import App from './App.vue'
import './index.css' // ← ← ← 新增這行
createApp(App).mount('#app')
...
```
然後
終於到最後步驟了，開啟專案根目錄的 `package.json`，並把指令修改如下：
```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"
},
```
<br>
使用 Tailwind
--
上面步驟確實都有做到，就可以開啟伺服器了。
執行 ==npm run serve== 之後，會看到他給你一個網址讓你可以瀏覽你剛剛建立的網站 (你們會因為電腦的 ip 跟我不同而在 Network 部分顯示不同的網址)
<center>
</center>
執行了之後，就可以去瀏覽網站了！ http://localhost:8080/
畫面大概會長這樣：
<center>
</center>
看到他跑版就可以確定我們的 Tailwind 已經生效啦！
現在趕快寫幾句 tailwind 並案下儲存來享受 jit 的即時更新吧！
<!-- === CSS設定 ============== -->
<style>
a {
color:#0072E3;
text-decoration: none;
transition:color 0.75s;
}
a:hover {
color:#84C1FF;
text-decoration: none;
transition:color 0.75s;
}
.markdown-body mark {
border-radius: 5px;
color:#c7254e;
background-color:#f9f2f4;
}
</style>
<!-- === CSS：程式碼深色主題 ============== -->
<style>
.markdown-body pre {
background-color: rgb(31, 41, 55);
border: 1px solid #555 !important;
color: #CCCCCC;
border-radius:12px;
/*border-radius:0px;*/
}
.markdown-body pre .hljs-tag {
color: #BAE5FD;
}
.markdown-body pre .hljs-keyword {
color: #20D3EE;
}
.markdown-body pre .hljs-string {
color:#BEF263;
}
.markdown-body pre .hljs-comment {
color:#9CA3B0;
}
.markdown-body pre .hljs-attr {
color:#20D3EE;
}
.markdown-body pre .hljs-name {
color:#E87BF9;
}
.markdown-body pre .hljs-built_in {
color:#F76E79;
}
</style>z
Sign in with Wallet
Connect another wallet