Mens Filament primært er designet til at arbejde med Tailwind CSS, er det muligt at bruge Bulma CSS i stedet, selvom det kan kræve mere brugerdefineret arbejde og ikke er officielt understøttet. Her er et par nøglepunkter:
- Filament giver et sæt præbyggede komponenter og værktøjer, der er designet til at fungere med Tailwind CSS. Brug af Bulma i stedet ville kræve genskabelse af stilene til disse komponenter fra bunden[1].
- Bulma er en moderne CSS-ramme baseret på Flexbox, der giver en enkel og fleksibel måde at bygge responsive grænseflader på. Det inkluderer foruddesignede UI-komponenter, der nemt kan tilpasses[2].
- For at bruge Bulma med Filament, skal du fjerne Tailwind og dets plugins og integrere Bulma i dit projekt. Dette ville indebære omskrivning af stilene til filamentkomponenter ved hjælp af Bulma-klasser[1].
- Brug af en anden CSS-ramme som Bulma kan introducere kompatibilitetsproblemer med Filaments funktioner og plugins. Filament-teamet anbefaler at bruge Tailwind CSS for den bedste oplevelse[3].
- En alternativ tilgang er at bruge Bulma sammen med Tailwind, ved at anvende Bulma-stile til dine egne brugerdefinerede komponenter, mens du stadig bruger Tailwind til de centrale Filament-komponenter. Dette kan dog kræve tilsidesættelse af nogle filament-stile[1].
Sammenfattende, mens det er teknisk muligt at bruge Bulma i stedet for Tailwind til Filament-temaer, kræver det betydeligt mere tilpasset arbejde, kan introducere kompatibilitetsproblemer og er ikke officielt understøttet af Filament-teamet. Den anbefalede tilgang er at bruge Tailwind CSS for den bedste oplevelse, når du bygger Filament-administrationspaneler.
Citater:[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