在 Vue 3 中使用 Tailwind CSS

起源於，剛進入資訊相關產業，也就是現在這間公司學的第一個框架是 Angular ， 如果使用 Angular-Cli 工具產生的 Component 會自動拆解為 HTML、TS 與 CSS 文件。雖然 Vue 提倡著 SFC (Single-File Components)，但是 HTML 內容較為豐富，或是頁面想實現多種功能時，會導致單一檔案的 Vue 中程式碼過長，造成程式閱讀性的降低。

那 Tailwind CSS 只是一點小小私心 ... 先前買的前端課程中，沒有把課上完，課程中是透過 Webpack 進行安裝，對非專業前端人員的小弟來說，光是環境的困難度就大大提升了。因此這次採用了 Tailwind-Cli 工具輔助，真希望有滿滿的 Cli 而且可以互相組合不衝突阿。

本篇文章對於處理個人遇見解法有效~

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

那就從環境開始吧~

1. 平台的 NodeJS 版本管理工具 Node Version Switcher (NVS)
2. NVS 安裝 NodeJS 特定版本
3. 利用 NodeJS 初始化 Vue3 (Vite)
   • 未建立專案資料夾：

     npm create vue@latest
     

   • 在專案資料夾下:

     npm create vue@latest .
     

4. 選擇 VUE 專案選項
   • ✔ Project name: …
   • ✔ Add TypeScript? … No / Yes
   • ✔ Add JSX Support? … No / Yes
   • ✔ Add Vue Router for Single Page Application development? … No / Yes
   • ✔ Add Pinia for state management? … No / Yes
   • ✔ Add Vitest for Unit testing? … No / Yes
   • ✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
   • ✔ Add ESLint for code quality? … No / Yes
   • ✔ Add Prettier for code formatting? … No / Yes

   ---

   依序選項為
   • 專案名稱(即專案資料夾名稱)
   • 使用 TypeScript 進行開發
   • 使用 JSX 進行開發
   • 使用 Vue Router 管理網頁路徑
   • 使用 Pinia 做為管理狀態工具
   • 使用 Vitest 進行單元測試
   • 選擇端對端 Test 測試工具
   • 使用 ESLint 做為程式碼管理規範
   • 使用 Prettier 做程式碼格式化工具
5. 畫面中會提醒進入專案資料夾下並執行，這裡只先執行 npm install

   npm install
   ...
   npm run dev
   

6. 接著我們繼續安裝 Tailwind CSS

   npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
   

7. 初始化 Tailwind CSS 至專案中，執行完此步驟會生成 tailwind.config.js 與 postcss.config.js 兩份文件

   npx tailwindcss init -p
   

8. 將 tailwind.config.js 內容，

   module.exports = {
       content: [],
       theme: {
           extend: {},
       },
       plugins: [], 
   }
   

   調整為

   module.exports = {
       content: [
           "./src/**/*", 
           "./src/**/*.{html, js, ts, vue}", 
       ],
       theme: {
           extend: {},
       },
       plugins: [], 
   }
   

9. 在專案中引入 Tailwind CSS，在 src/assets 新增 css 資料夾，並在 css 資料夾下新增 tailwind.css 文件，開啟 tailwind.css 修改內容為

   @import 'tailwindcss/base';
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';
   

10. 在 Vue 中引入 Tailwind CSS，在專案資料夾下的 main.ts 中引入

    ...
    import './assets/css/tailwind.css'
    ...
    import { createApp } from 'vue'
    import App from './App.vue'
    const app = createApp(App)
    ...
    

至此在專案中就可以使用 Tailwind CSS 提供的 Class 了。
PS. 在進行 Tailwind CSS 頁面開發時常會遇到寫長長一串的 class，並且這樣式還是多次複用，可以利用 @layer 與 @apply 做一個自己命名的 class，並放在共用或者是單頁應用的 css 代碼中。例如:

@layer {
  .menu-list-p {
    @apply font-semibold text-lime-800
  }
}

這樣在頁面中就可以使用 menu-list-p 這個自訂的 class 進行渲染處理了。

原本要同時寫 NVS 安裝與 Vue SFC 分離為 HTML、TS 與 CSS 的初步構想，由於紀錄時長的關係今天就到這一步啦，就會新增篇幅來處理了。

參考資料:

• VUE 官方文檔
• Tailwindcss 官方文檔
• Tailwindlabs Github Discussions - Utility classes not found warning on build
• snyk - How to set up Tailwind with Vue
• thewebtier - How to integrate Tailwind CSS with VueJS?