Mens Filament først og fremst er designet for å fungere med Tailwind CSS, er det mulig å bruke Bulma CSS i stedet, selv om det kan kreve mer tilpasset arbeid og ikke støttes offisielt. Her er noen hovedpunkter:
- Filament gir et sett med forhåndsbygde komponenter og verktøy som er designet for å fungere med Tailwind CSS. Å bruke Bulma i stedet ville kreve å gjenskape stilene for disse komponentene fra bunnen av[1].
– Bulma er et moderne CSS-rammeverk basert på Flexbox som gir en enkel og fleksibel måte å bygge responsive grensesnitt på. Den inkluderer forhåndsdesignede UI-komponenter som enkelt kan tilpasses[2].
- For å bruke Bulma med Filament, må du fjerne Tailwind og dets plugins, og integrere Bulma i prosjektet ditt. Dette vil innebære å skrive om stilene for filamentkomponenter ved å bruke Bulma-klasser[1].
- Bruk av et annet CSS-rammeverk som Bulma kan introdusere kompatibilitetsproblemer med Filaments funksjoner og plugins. Filament-teamet anbefaler å bruke Tailwind CSS for den beste opplevelsen[3].
- En alternativ tilnærming er å bruke Bulma sammen med Tailwind, bruke Bulma-stiler på dine egne tilpassede komponenter mens du fortsatt bruker Tailwind for kjernefilamentkomponentene. Dette kan imidlertid kreve overstyring av enkelte filamentstiler[1].
Oppsummert, mens det er teknisk mulig å bruke Bulma i stedet for Tailwind for Filament-temaer, krever det betydelig mer tilpasset arbeid, kan introdusere kompatibilitetsproblemer og støttes ikke offisielt av Filament-teamet. Den anbefalte tilnærmingen er å bruke Tailwind CSS for den beste opplevelsen når du bygger Filament-administrasjonspaneler.
Sitater:[1] https://stackoverflow.com/questions/75169839/progressively-replacering-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