简介

从 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 官方插件,用于在 PrimeVue 等 Prime UI 库和 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