簡介

從 PrimeFlex 遷移到 Tailwind CSS。

PrimeFlex 旨在成為一個輕量級的 CSS 工具,以搭配 Prime UI 函式庫。作為 PrimeTek 產品路線圖規劃的一部分,團隊決定避免維護 CSS 函式庫,並將資源用於改進 UI 函式庫。社群的回饋在這項決策中也至關重要,因為大多數應用程式都有自己的 CSS 工具,無論是 Tailwind、Bootstrap 還是內部工具,因此在專案中新增 PrimeFlex 會導致功能重疊。

特別是 Tailwind CSS 是一個受歡迎的選擇,我們甚至為無樣式模式建置了 Tailwind CSS 預設衍生專案,以便能夠使用實用類別來設定 PrimeVue 元件的樣式。在這次工作中,我們意識到 PrimeFlex 提供的價值,例如將 PrimeVue 主題作為實用類別,可以實作為 Tailwind 外掛程式。作為 PrimeVue v4 的一部分,已建立 tailwind-primeui 外掛程式以實現無縫整合,網站範本示範已從 PrimeFlex 遷移到 Tailwind,並建立了一個名為pf2tw的轉換器工具。總而言之,PrimeTek 官方建議使用 Tailwind CSS 作為 PrimeFlex 的替代方案。

tailwindcss-primeui 是 PrimeTek 的官方外掛程式,旨在提供 Prime UI 函式庫(如 PrimeVue)與 Tailwind CSS 之間的一流整合。它旨在在樣式和無樣式模式下工作。例如,在樣式模式下,主要和表面等語義顏色會作為 Tailwind 工具提供,例如,透過從設計令牌衍生它們的值,bg-primarytext-surface-500text-muted-color。此整合不相容於 PrimeVue v3,且需要 PrimeVue v4。

查看Tailwind章節,以瞭解如何有效地將 Tailwind CSS 與 PrimeVue 搭配使用的更多詳細資訊。

primeclt 是 PrimeTek 提供的一個命令列工具,用於協助專案設定和遷移。建立 pf2tw 命令是為了在 PrimeFlex 與 Tailwind CSS 之間順利遷移。作為先決條件,需要 tailwindcss-primeui 來提供核心 Tailwind CSS 中不存在的相符類別,例如語義顏色和動畫。為了實現完美遷移,強烈建議使用 PrimeVue v4 作為 tailwindcss 外掛程式的要求。

安裝 PrimeCLT。


npm install -g primeclt

在包含要遷移檔案的目錄中執行 pf2wt


prime pf2tw

有一些實用類別不會遷移,因為它們沒有對應項目,請改用 flexbox 工具作為替代。

  • formgrid
  • formgroup
  • formgroup-inline
  • col
  • col-fixed
  • field
  • field-checkbox
  • field-radiobutton
  • reset