Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon フィラメントのテーマに Tailwind の代わりに Bulma を使用できますか


フィラメントのテーマに Tailwind の代わりに Bulma を使用できますか


Filament は主に Tailwind CSS で動作するように設計されていますが、代わりに Bulma CSS を使用することもできます。ただし、より多くのカスタム作業が必要になる可能性があり、公式にはサポートされていません。いくつかの重要なポイントを次に示します。

- Filament は、Tailwind CSS で動作するように設計された、事前に構築されたコンポーネントとツールのセットを提供します。代わりに Bulma を使用するには、これらのコンポーネントのスタイルを最初から再作成する必要があります[1]。

- Bulma は、Flexbox をベースにした最新の CSS フレームワークで、応答性の高いインターフェイスを構築するためのシンプルかつ柔軟な方法を提供します。これには、簡単にカスタマイズできる事前に設計された UI コンポーネントが含まれています[2]。

- Bulma を Filament で使用するには、Tailwind とそのプラグインを削除し、Bulma をプロジェクトに統合する必要があります。これには、Bulma クラス[1]を使用して Filament コンポーネントのスタイルを書き直すことが含まれます。

- Bulma などの別の CSS フレームワークを使用すると、Filament の機能やプラグインとの互換性の問題が発生する可能性があります。 Filament チームは、最高のエクスペリエンスを得るために Tailwind CSS を使用することを推奨しています[3]。

- 別のアプローチは、Tailwind と並行して Bulma を使用し、コアの Filament コンポーネントには Tailwind を使用しながら、Bulma スタイルを独自のカスタム コンポーネントに適用することです。ただし、これには一部のフィラメント スタイルをオーバーライドする必要がある場合があります[1]。

要約すると、Filament テーマに Tailwind の代わりに Bulma を使用することは技術的には可能ですが、これには大幅に多くのカスタム作業が必要であり、互換性の問題が発生する可能性があり、Filament チームによって正式にサポートされていません。推奨されるアプローチは、Filament 管理パネルを構築するときに最高のエクスペリエンスを実現するために、Tailwind CSS を使用することです。

引用:
[1] https://stackoverflow.com/questions/75169839/progressively-replacing-bulma-with-tailwind
[2] https://blog.openreplay.com/tailwind-vs-bulma/
[3] https://filamentphp.com/community/easy-way-to-create-a-filament-theme-in- minutes
[4] https://dev.to/kevin_odongo35/how-to-add-tailwind-css-bootstrap-vuetify-or-bulma-to-a-vue-project-3on2
[5] https://github.com/yepsua/filament-主題