本單元涵蓋 Vue 的樣式管理與 UI 框架的整合應用，特別著重在Tailwind CSS 和 PrimeVue 的運用。

相關頁面

• Tailwind CSS 整合
• UI 框架概覽
• PrimeVue 元件庫
• PrimeVue Tailwind 模板

學習目標

1. 了解 Vue 組件中的樣式處理方式
2. 掌握 Tailwind CSS 在 Vue 專案中的設置方法
3. 學習如何合理組織 Tailwind 樣式
4. 實現響應式設計並理解其在 Vue 中的應用
5. 掌握 Tailwind 與 Vue 組件的最佳實踐

1. Tailwind CSS 在 Vue 專案中的設置

1.1 安裝與配置

步驟 1：安裝必要的套件

# 安裝 Tailwind CSS 及其依賴
npm install -D tailwindcss postcss autoprefixer

# 生成配置檔案
npx tailwindcss init -p

課程目標

• 瞭解如何使用 PrimeVue 的 Unstyled 模式與 Tailwind CSS 結合，建立自訂的 UI 元件樣式。
• 學習如何使用 primevue-tailwind-preset-template 模板，快速開始自訂樣式的開發。
• 掌握如何設定 Tailwind CSS 的語意化色彩與暗黑模式支援。(tailwind.primevue.org)