---
title: Vite + Tailwind JIT 專案建置
tags: vue
---

Vite + TailwindCSS JIT 專案建置
=

建立 Vite 專案
--
在你要放置專案的地方執行這個指令來建立 vue 模板的 vite 專案

npm init @vitejs/app [專案名稱] --template vue

比如

npm init @vitejs/app vite-app --template vue

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

cd vite-app
npm install
npm run dev

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

<center>

</center>
<br>

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

<center>

</center>

測試完畢、能瀏覽之後就可以先關掉了，因為後面要來安裝 tailwind
<br>

使用 vitawind 來安裝 tailwind
--
接著我們要用 vitawind 來安裝 tailwind。執行這個指令，把所需的東西一起裝下去～

npm install vitawind

然後要建立 tailwind 和 postcss 的設定檔以及 tailwind.css

npx vitawind

建立完成後會發現專案根目錄多出了 ==tailwind.config.js==、==postcss.config.js== 和 ==tailwind.css== 三個檔案。

這些都完成之後還有一些小手續，是要開始使用 tailwind 的前置準備。
<br>

把 vitawind 加入 vite 插件列表
--
使用之前，我們必須先準備執行時需要的檔案。
在 `./src` 裡面建立一個檔案叫做 index.css，檔案內容留空即可，因為等等 vite dev server 啟動後會把 tailwind 的內容編譯進去。

再來我們要在 ==main.js== 裡面引用 index.css，只要加上一行 import 即可～

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'       // 加上這行

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

加完之後回到根目錄，找到 ==vite.config.js==，我們要來增加編譯 tailwind 用的指令。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitawind from 'vitawind'  // 增加這行

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vitawind('tailwind.css','./src/index.css')
    // 還有這行 ↑↑↑
  ]
})

插件新增上去囉！ 接下來蓄勢待發，及將要再開啟 vite 囉！！

使用 Tailwind
--
在使用之前，我們先打開 vite dev server。
(非必要，你也可以後面的步驟都做完再打開，只是先打開會比較爽)

npm run dev

瀏覽畫面，你會發現全都跑版了 QQ

<center>

</center>

因為我們再來就是要體驗 vite 的==熱更新==速度以及 tailwind 帶來的美好！！！

dev server 先不用關，只要把兩個 .vue 檔的內容換一下就好了～
先來全部覆蓋掉 ==./src/App.vue== 的內容：

<template>
  <div class="text-center">
    <img class="mx-auto mt-12 mb-8" alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Hello Vue 3 + Vite" />
  </div>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

再來是 ==./src/components/HelloWorld.vue==：

<template>

  <h1 class="text-3xl font-bold">{{ msg }}</h1>

  <p class="text-green-500 space-x-4 mt-4">
    <a
      class="underline hover:text-green-400 transition-all"
      href="https://vitejs.dev/guide/features.html"
      target="_blank"
    >
      Vite Documentation
    </a>
    <a 
      class="underline hover:text-green-400 transition-all" 
      href="https://v3.vuejs.org/"
      target="_blank"
    >
      Vue 3 Documentation
    </a>
  </p>

  <button
    class="rounded bg-gray-300 px-2 py-2 my-6 hover:bg-gray-200 transition-all" 
    @click="state.count++"
  >
    count is: {{ state.count }}
  </button>

  <p>
    Edit
    <code class="text-gray-500">components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<script setup>
import { defineProps, reactive } from 'vue'

defineProps({
  msg: String
})

const state = reactive({ count: 0 })
</script>

<br>

替換完之後都按儲存，再來看一下網頁...
<center>

</center>

是不是！！！ 馬上就更新了！
而且看來 tailwind 的語法也順利生效了呢，這樣就完成囉！
<br>

<!-- === 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>