無論在 Styled Mode 或是 Unstyled Mode，皆可自行安裝其他 CSS 通用類別的 Library 到專案中，本篇說明如何安裝及載入 tailwindCSS 到 PrimeVue 的專案內，並在 Styled Mode 下整合 PrimeVue 主題。

1. 在 tailwindCSS 官方文件中，以 Using postCSS 安裝到 vite 專案上。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. 在執行 npx tailwindcss init 會自動產生 tailwind.config.js，需要再額外自行新增 postcss.config.js，並依照下方設定方式進行設定

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

// tailwind.config.js
export default {
  content: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}'
  ],
  theme: {
    extend: {}
  }
}

3. 接著安裝與 PrimeVue 的整合套件，在終端機輸入指令 npm i tailwindcss-primeui ，安裝完成後，須到 tailwind.config.js 進行套件的整合設定。

// tailwind.config.js
export default {
	...
	plugins: [require('tailwindcss-primeui')] // 加入此行
}

4. 官方文件上說明由於 CSS 的特性導致 tailwindCSS 樣式可能無法順利覆蓋，提供兩個解決方法：

• 方法一：加上 ! 以覆蓋樣式。(此方法不推薦使用)

<InputText placeholder="Override" class="!p-8" />

• 方法二：在 main.js 加入 CSS 樣式載入順序，在 order 的屬性表示優先載入順序：

表示會先載入 tailwind-base，再載入 PrimeVue 的主題樣式，最後載入 tailwind 通用類別。

app.use(PrimeVue, {
  theme: {
    preset: Aura,
    options: {
      cssLayer: { // tailwindCSS 及 primeVue 載入順序設定
        name: 'primevue',
        order: 'tailwind-base, primevue, tailwind-utilities'
      }
    }
  }
})

在 main.scss 內加入 tailwindCSS directives 與 primeVue 設定。

// assets/main.scss
@layer tailwind-base, primevue, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

5. 如此便可完成 tailwindCSS 安裝、載入及與 PrimeVue 整合。

// App.vue > HomeView.vue
<template>
  <Button
    label="Check"
    icon="pi pi-check"
    class="bg-indigo-500 hover:bg-indigo-700 border-0 rounded-xl"
  />
</template>

參考連結：

1. https://tailwindcss.com/docs/installation/using-postcss
2. https://primevue.org/tailwind/