跳至主要內容

PrimeVue Tailwind Template

Jia-Yin2025年5月14日大约 3 分鐘coursefrontendwebvuetailwind

課程目標

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

學習內容

  • PrimeVue Unstyled 模式與 Tailwind CSS 的整合方式。
  • 使用 primevue-tailwind-preset-template 建立自訂樣式的流程。
  • 設定 Tailwind CSS 的語意化色彩與暗黑模式。
  • 實作自訂的 InputText 元件樣式。(GitHub)

核心概念解釋

PrimeVue Unstyled 模式

PrimeVue 提供 Unstyled 模式，允許開發者自訂元件的樣式，避免預設樣式的限制。這種模式特別適合與 Tailwind CSS 結合，實現高度客製化的 UI。(primevue.org)

Tailwind CSS 的語意化色彩

透過在 tailwind.config.js 中設定語意化色彩（如 primary、surface 等），可以使用 CSS 變數來統一管理色彩主題，方便日後的維護與調整。(primevue.org)

暗黑模式支援

Tailwind CSS 支援暗黑模式，透過設定 darkMode 為 'class'，並在 HTML 元素上添加對應的 class（如 dark），即可切換暗黑模式。

程式碼範例及詳細註釋

1. 建立自訂的 InputText 元件樣式

在 src/mypreset/inputtext/index.js 中定義 InputText 元件的樣式：(GitHub)

// src/mypreset/inputtext/index.js
export default {
  root: 'border border-surface-300 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500',
};

這段程式碼定義了 InputText 元件的根元素樣式，包含邊框、內距、圓角，以及聚焦時的外框效果。

2. 組合所有元件樣式

在 src/mypreset/index.js 中匯入並導出所有元件的樣式：

// src/mypreset/index.js
import global from './global';
import inputtext from './inputtext';

export default {
  global,
  inputtext,
};

這樣可以在 PrimeVue 的設定中一次性載入所有自訂的元件樣式。

3. 設定 Tailwind CSS 的語意化色彩

在 tailwind.config.js 中擴充主題的色彩設定：(primevue.org)

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: 'rgb(var(--primary-50))',
          100: 'rgb(var(--primary-100))',
          // ...
          900: 'rgb(var(--primary-900))',
        },
        surface: {
          0: 'rgb(var(--surface-0))',
          50: 'rgb(var(--surface-50))',
          // ...
          900: 'rgb(var(--surface-900))',
        },
      },
    },
  },
};

這樣可以使用如 bg-primary-100、text-surface-900 等語意化的 Tailwind CSS 類別。(GitHub)

4. 啟用暗黑模式

在 tailwind.config.js 中設定暗黑模式：(Dribbble)

// tailwind.config.js
export default {
  darkMode: 'class',
  // ...
};

然後在 HTML 的根元素（如 <html> 或 <body>）上添加 class="dark"，即可啟用暗黑模式。

實踐練習題

練習 1：建立自訂的 Button 元件樣式

請在 src/mypreset/button/index.js 中定義一個自訂的 Button 元件樣式，要求如下：

  • 背景色為 primary-500。
  • 文字顏色為白色。
  • 內距為 px-4 py-2。
  • 圓角為 rounded。
  • 滑鼠懸停時，背景色變為 primary-600。

練習 2：設定自訂的暗黑模式樣式

請在 src/mypreset/global.js 中添加以下暗黑模式的全域樣式：

  • 背景色為 surface-900。
  • 文字顏色為 surface-100。

提示：可以使用 CSS 的 @media (prefers-color-scheme: dark) 媒體查詢來實現。

補充資源

透過本課程，您應該能夠掌握如何使用 PrimeVue 的 Unstyled 模式與 Tailwind CSS 結合，建立自訂的 UI 元件樣式，並設定語意化色彩與暗黑模式支援。

Copyright © 2025 Jia-Yin