Tailwind CSS

PrimeVue 與 Tailwind CSS 在樣式化和無樣式模式下的整合。

概述 #

Tailwind CSS 是一個基於實用優先設計的熱門 CSS 框架。核心提供彈性的 CSS 類別，其中包含預定義的 CSS 規則，可用於建置您自己的 UI 元素。例如，Tailwind 提供類似 bg-blue-500、rounded 和 p-4 等基礎類別來套用按鈕，而不是像 Bootstrap 那樣使用主觀的 btn 類別。一組可重複使用的類別也可以分組為 Tailwind CSS 元件，甚至有一些程式庫採用這種方法專門為 Tailwind 建置元件。

Tailwind 是一個出色的 CSS 程式庫，但當與 Vue.js 結合使用時，它缺乏真正全面的 UI 套件，這時 PrimeVue 就會派上用場，它提供了各種高度可訪問且功能豐富的 UI 元件程式庫。PrimeVue 的核心不依賴 Tailwind CSS，而是我們提供了必要的整合點，例如 primeui tailwind 外掛程式和無樣式模式的預設值。

預設 #

在 PrimeVue 的無樣式模式中，會關閉設計符號和 css 類別等預設樣式元素，以便您可以完全控制具有傳遞屬性的元件樣式。當您想要透過包裝 PrimeVue 元件來建置基於自訂設計的 UI 程式庫，或者只是利用 Tailwind CSS 來設定 PrimeVue 元件的樣式時，此功能非常有用。

無樣式模式也使用 預設 概念，就像樣式化模式一樣，來定義主題。在樣式化模式中，預設是一組使用 CSS 變數實作的設計符號，而在無樣式模式中，預設是一個傳遞配置物件，可將 Tailwind CSS 類別注入元件。如果您偏好忽略預設的樣式化模式主題 API，而改用 Tailwind CSS 來設定 PrimeVue UI 元件的樣式，請在獨立的 Tailwind CSS 預設專案網站上了解更多資訊。

外掛程式 #

tailwindcss-primeui 是 PrimeTek 的官方外掛程式，可在 PrimeVue 等 Prime UI 程式庫和 Tailwind CSS 之間提供一流的整合。它旨在在樣式化和無樣式模式下運作。例如，在樣式化模式中，主要和表面等語意顏色會以 Tailwind 公用程式的形式提供，例如 bg-primary、text-surface-500、text-muted-color。

外掛程式可在 npm 上取得。


npm i tailwindcss-primeui

安裝後，請在您的 tailwind 設定檔中設定外掛程式。


// tailwind.config.js
module.exports = {
    // ...
    plugins: [require('tailwindcss-primeui')]
};

擴充功能 #

外掛程式使用一組新的公用程式來擴充預設設定。所有變體和斷點都支援，例如 dark:sm:hover:bg-primary。

調色盤

類別屬性
primary-[50-950]主要調色盤。
surface-[0-950]表面調色盤。
primary預設主要顏色。
primary-contrast預設主要對比色。
primary-emphasis預設主要強調色。
border-surface預設主要強調色。
bg-emphasis強調背景，例如懸停的元素。
bg-highlight醒目提示背景。
bg-highlight-emphasis醒目提示帶強調的背景。
rounded-border邊框半徑。
text-color帶強調的文字顏色。
text-color-emphasis預設主要強調色。
text-muted-color次要文字顏色。
text-muted-color-emphasis帶強調的次要文字顏色。

覆寫 #

在樣式化模式中，由於 css 特殊性，Tailwind 公用程式可能無法覆寫預設樣式，有兩種可能的解決方案。

重要

使用 ! 作為前置詞來強制執行樣式。


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

CSS 圖層

啟用 PrimeVue CSS 圖層，並將 tailwind 樣式設定為具有更高的特殊性和圖層。這樣，就不需要 ! 前置詞。


import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';

const app = createApp(App);

app.use(PrimeVue, {
    theme: {
        preset: Aura,
        options: {
            cssLayer: {
                name: 'primevue',
                order: 'tailwind-base, primevue, tailwind-utilities'
            }
        }
    }
 });



@layer tailwind-base, primevue, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

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

範例 #

PrimeVue 和 Tailwind CSS 的範例使用案例。

調色盤 #

PrimeVue 調色盤作為公用程式類別。

  • primary
    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950
  • 表面
    0
    50
    100
    200
    300
    400
    500
    600
    700
    800
    900
    950
primary
醒目提示
方塊

表單 #

使用 Tailwind 公用程式來設定帶有 PrimeVue 元件的表單的回應式版面配置。


<div class="flex flex-col gap-6 w-full sm:w-auto">
    <div class="flex flex-col sm:flex-row sm:items-center gap-6">
        <div class="flex-auto">
            <label for="firstname" class="block font-semibold mb-2">Firstname</label>
            <InputText id="firstname" class="w-full" />
        </div>
        <div class="flex-auto">
            <label for="lastname" class="block font-semibold mb-2">Lastname</label>
            <InputText id="lastname" class="w-full" />
        </div>
    </div>
    <div class="flex flex-col sm:flex-row sm:items-center gap-6">
        <div class="flex-1">
            <label for="date" class="block font-semibold mb-2">Date</label>
            <DatePicker inputId="date" class="w-full" />
        </div>
        <div class="flex-1">
            <label for="country" class="block font-semibold mb-2">Country</label>
            <Select v-model="selectedCountry" inputId="country" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full">
                <template #value="slotProps">
                    <div v-if="slotProps.value" class="flex items-center">
                        <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
                        <div>{{ slotProps.value.name }}</div>
                    </div>
                    <span v-else>
                        {{ slotProps.placeholder }}
                    </span>
                </template>
                <template #option="slotProps">
                    <div class="flex items-center">
                        <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
                        <div>{{ slotProps.option.name }}</div>
                    </div>
                </template>
            </Select>
        </div>
    </div>
    <div class="flex-auto">
        <label for="message" class="block font-semibold mb-2">Message</label>
        <Textarea id="message" class="w-full" rows="4" />
    </div>
</div>

無頭 #

具有自訂 UI 的無頭 PrimeVue 對話框。


<Button label="Login" icon="pi pi-user" @click="visible = true" />

<Dialog v-model:visible="visible" pt:root:class="!border-0 !bg-transparent" pt:mask:class="backdrop-blur-sm">
    <template #container="{ closeCallback }">
        <div class="flex flex-col px-8 py-8 gap-6 rounded-2xl" style="background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                <path
                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
                    fill="var(--p-primary-700)"
                />
                <path
                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
                    fill="var(--p-primary-200)"
                />
            </svg>
            <div class="inline-flex flex-col gap-2">
                <label for="username" class="text-primary-50 font-semibold">Username</label>
                <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
            </div>
            <div class="inline-flex flex-col gap-2">
                <label for="password" class="text-primary-50 font-semibold">Password</label>
                <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
            </div>
            <div class="flex items-center gap-4">
                <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
                <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
            </div>
        </div>
    </template>
</Dialog>

動畫 #

外掛程式還新增了擴充的動畫公用程式，可與 styleclass 和 animateonscroll 指示詞搭配使用。


<Select v-model="animation" :options="animations" placeholder="Select One" class="w-full sm:w-44" />
<div class="py-8 overflow-hidden">
    <div :class="`rounded-border bg-primary w-16 h-16 mx-auto animate-${animation} animate-once animate-duration-1000`"></div>
</div>

動畫

類別屬性
animate-fadein淡入 0.15 秒線性
animate-fadeout淡出 0.15 秒線性
animate-slidedown下滑 0.45 秒缓入缓出
animate-slideup上滑 0.45 秒立方貝茲 (0, 1, 0, 1)
animate-scalein縮放 0.15 秒線性
animate-fadeinleft從左淡入 0.15 秒線性
animate-fadeoutleft從左淡出 0.15 秒線性
animate-fadeinright從右淡入 0.15 秒線性
animate-fadeoutright從右淡出 0.15 秒線性
animate-fadeinup從上淡入 0.15 秒線性
animate-fadeoutup從上淡出 0.15 秒線性
animate-fadeindown從下淡入 0.15 秒線性
animate-fadeoutup從上淡出 0.15 秒線性
animate-width寬度 0.15 秒線性
animate-flip翻轉 0.15 秒線性
animate-flipup向上翻轉 0.15 秒線性
animate-flipleft淡入 0.15 秒線性
animate-flipright向右翻轉 0.15 秒線性
animate-zoomin放大 0.15 秒線性
animate-zoomindown向下放大 0.15 秒線性
animate-zoominleft向左放大 0.15 秒線性
animate-zoominright向右放大 0.15 秒線性
animate-zoominup向上放大 0.15 秒線性

動畫持續時間

類別屬性
animate-duration-0animation-duration: 0 秒
animate-duration-75animation-duration: 75 毫秒
animate-duration-100animation-duration: 100 毫秒
animate-duration-200animation-duration: 200 毫秒
animate-duration-300animation-duration: 300 毫秒
animate-duration-400animation-duration: 400 毫秒
animate-duration-500animation-duration: 500 毫秒
animate-duration-700animation-duration: 700 毫秒
animate-duration-1000animation-duration: 1000 毫秒
animate-duration-2000animation-duration: 2000 毫秒
animate-duration-3000animation-duration: 300 毫秒

動畫延遲

類別屬性
animate-delay-noneanimation-duration: 0 秒
animate-delay-75animation-delay: 75 毫秒
animate-delay-100animation-delay: 100 毫秒
animate-delay-150animation-delay: 150 毫秒
animate-delay-200animation-delay: 200 毫秒
animate-delay-300animation-delay: 300 毫秒
animate-delay-400animation-delay: 400 毫秒
animate-delay-500animation-delay: 500 毫秒
animate-delay-700animation-delay: 700 毫秒
animate-delay-1000animation-delay: 1000 毫秒

重複次數

類別屬性
animate-infiniteanimation-iteration-count: 無限
animate-onceanimation-iteration-count: 1
animate-twiceanimation-iteration-count: 2

方向

類別屬性
animate-normalanimation-direction: 正常
animate-reverseanimation-direction: 反向
animate-alternateanimation-direction: 交替
animate-alternate-reverseanimation-direction: 反向交替

時間函數

類別屬性
animate-ease-linearanimation-timing-function: 線性
animate-ease-inanimation-timing-function: 立方貝茲 (0.4, 0, 1, 1)
animate-ease-outanimation-timing-function: cubic-bezier(0, 0, 0.2, 1)
animate-ease-in-outanimation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)

填充模式

類別屬性
animate-fill-noneanimation-fill-mode: normal
animate-fill-forwardsanimation-fill-mode: forwards
animate-fill-backwardsanimation-fill-mode: backwards
animate-fill-bothanimation-fill-mode: both

播放狀態

類別屬性
animate-runninganimation-play-state: running
animate-pausedanimation-play-state: paused

背面可見性狀態

類別屬性
backface-visiblebackface-visibility: visible
backface-hiddenbackface-visibility: hidden
PrimeVue 4.0.7，基於 Vue 3，由 PrimeTek 開發