Mặc dù Filament được thiết kế chủ yếu để hoạt động với CSS Tailwind, nhưng bạn có thể sử dụng CSS Bulma thay thế, mặc dù nó có thể yêu cầu nhiều thao tác tùy chỉnh hơn và không được hỗ trợ chính thức. Dưới đây là một số điểm chính:
- Filament cung cấp một bộ thành phần và công cụ dựng sẵn được thiết kế để hoạt động với Tailwind CSS. Thay vào đó, việc sử dụng Bulma sẽ yêu cầu tạo lại kiểu cho các thành phần này từ đầu[1].
- Bulma là một khung CSS hiện đại dựa trên Flexbox, cung cấp một cách đơn giản và linh hoạt để xây dựng các giao diện đáp ứng. Nó bao gồm các thành phần giao diện người dùng được thiết kế sẵn có thể dễ dàng tùy chỉnh [2].
- Để sử dụng Bulma với Filament, bạn cần xóa Tailwind và các plugin của nó, đồng thời tích hợp Bulma vào dự án của mình. Điều này sẽ liên quan đến việc viết lại kiểu cho các thành phần Filament bằng cách sử dụng các lớp Bulma[1].
- Việc sử dụng khung CSS khác như Bulma có thể gây ra các vấn đề về khả năng tương thích với các tính năng và plugin của Filament. Nhóm Filament khuyên bạn nên sử dụng CSS Tailwind để có trải nghiệm tốt nhất[3].
- Một cách tiếp cận khác là sử dụng Bulma cùng với Tailwind, áp dụng kiểu Bulma cho các thành phần tùy chỉnh của riêng bạn trong khi vẫn sử dụng Tailwind cho các thành phần Filament cốt lõi. Tuy nhiên, điều này có thể yêu cầu ghi đè một số kiểu Filament[1].
Tóm lại, mặc dù về mặt kỹ thuật có thể sử dụng Bulma thay vì Tailwind cho các chủ đề Filament, nhưng nó đòi hỏi nhiều công việc tùy chỉnh hơn đáng kể, có thể gây ra các vấn đề về khả năng tương thích và không được nhóm Filament hỗ trợ chính thức. Phương pháp được đề xuất là sử dụng CSS Tailwind để có trải nghiệm tốt nhất khi xây dựng bảng quản trị Filament.
Trích dẫn:[1] https://stackoverflow.com/questions/75169839/progressively-replacing-bulma-with-tailwind
[2] https://blog.openreplay.com/tailwind-vs-bulma/
[3] https://filaphp.com/community/easy-way-to-create-a-fil-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/fil-themes