PrimeFlexからTailwind CSSへの移行。
PrimeFlex は、Prime UIライブラリに付随する軽量CSSユーティリティとして設計されています。PrimeTekの製品ロードマップ計画の一環として、チームはCSSライブラリのメンテナンスを避け、代わりにUIライブラリの改善にリソースを投入することを決定しました。コミュニティからのフィードバックもこの決定に不可欠でした。ほとんどのアプリケーションは、Tailwind、Bootstrap、または社内製のCSSユーティリティを独自に持っているため、PrimeFlexをプロジェクトに追加すると機能が重複してしまうからです。
特にTailwind CSSは人気のある選択肢であり、私たちはPrimeVueコンポーネントをスタイルするためにユーティリティクラスを使用できるように、Tailwind CSSプリセットスピンオフプロジェクトをスタイルなしモード向けに構築しました。この作業 során、PrimeVueのテーマ設定をユーティリティクラスとして提供するなど、PrimeFlexによって追加された価値は、Tailwindプラグインとして実装できることに気付きました。PrimeVue v4の一環として、シームレスな統合のためにtailwind-primeuiプラグインが作成され、ウェブサイトのテンプレートデモはPrimeFlexからTailwindに移行され、 _pf2tw_ というコンバーターツールが作成されました。要約すると、PrimeTekはPrimeFlexの代替としてTailwind CSSを公式に推奨しています。
tailwindcss-primeui は、PrimeTekによる公式プラグインであり、PrimeVueなどのPrime UIライブラリとTailwind CSS間の緊密な統合を提供します。これは、スタイル付きモードとスタイルなしモードの両方で動作するように設計されています。たとえば、スタイル付きモードでは、プライマリやサーフェスなどのセマンティックカラーは、デザイントークンから値を派生させて、 _bg-primary_ 、 _text-surface-500_ 、 _text-muted-color_ などのTailwindユーティリティとして提供されます。この統合はPrimeVue v3とは互換性がなく、PrimeVue v4が必要です。
PrimeVueでTailwind CSSを効率的に使用する方法の詳細については、Tailwind セクションをご覧ください。
primeclt は、PrimeTekによるコマンドラインユーティリティであり、プロジェクトのセットアップと移行を支援します。 _pf2tw_ コマンドは、PrimeFlexからTailwind CSSへのスムーズな移行のために作成されました。前提条件として、セマンティックカラーやアニメーションなど、コアTailwind CSSに存在しない一致するクラスを提供するには、 _tailwindcss-primeui_ が必要です。完璧な移行のためには、tailwindcssプラグインの要件としてPrimeVue v4を使用することを強くお勧めします。
PrimeCLTをインストールします。
npm install -g primeclt
移行するファイルが含まれているディレクトリで _pf2wt_ を実行します。
prime pf2tw
対応するものがないため移行されないユーティリティクラスがいくつかあります。代わりにflexboxユーティリティを代替として使用してください。