While Filament is primarily designed to work with Tailwind CSS, it is possible to use Bulma CSS instead, though it may require more custom work and is not officially supported. Here are a few key points:
- Filament provides a set of pre-built components and tools that are designed to work with Tailwind CSS. Using Bulma instead would require recreating the styles for these components from scratch[1].
- Bulma is a modern CSS framework based on Flexbox that provides a simple and flexible way to build responsive interfaces. It includes pre-designed UI components that can be easily customized[2].
- To use Bulma with Filament, you would need to remove Tailwind and its plugins, and integrate Bulma into your project. This would involve rewriting the styles for Filament components using Bulma classes[1].
- Using a different CSS framework like Bulma may introduce compatibility issues with Filament's features and plugins. The Filament team recommends using Tailwind CSS for the best experience[3].
- An alternative approach is to use Bulma alongside Tailwind, applying Bulma styles to your own custom components while still using Tailwind for the core Filament components. However, this may require overriding some Filament styles[1].
In summary, while it is technically possible to use Bulma instead of Tailwind for Filament themes, it requires significantly more custom work, may introduce compatibility issues, and is not officially supported by the Filament team. The recommended approach is to use Tailwind CSS for the best experience when building Filament admin panels.
Citations:[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-themes