แม้ว่า Filament ได้รับการออกแบบมาให้ทำงานกับ Tailwind CSS เป็นหลัก แต่ก็สามารถใช้ Bulma CSS แทนได้ แม้ว่าอาจต้องมีการทำงานที่กำหนดเองมากกว่านี้และไม่ได้รับการสนับสนุนอย่างเป็นทางการ นี่คือประเด็นสำคัญบางประการ:
- Filament มีชุดส่วนประกอบและเครื่องมือที่สร้างไว้ล่วงหน้าซึ่งออกแบบมาเพื่อทำงานกับ Tailwind CSS การใช้ Bulma แทนจะต้องสร้างสไตล์ใหม่สำหรับส่วนประกอบเหล่านี้ตั้งแต่เริ่มต้น [1]
- Bulma เป็นเฟรมเวิร์ก CSS สมัยใหม่ที่ใช้ Flexbox ซึ่งมอบวิธีที่ง่ายและยืดหยุ่นในการสร้างอินเทอร์เฟซแบบตอบสนอง ประกอบด้วยส่วนประกอบ UI ที่ออกแบบไว้ล่วงหน้าซึ่งสามารถปรับแต่งได้อย่างง่ายดาย[2]
- หากต้องการใช้ Bulma กับ Filament คุณจะต้องลบ Tailwind และปลั๊กอินของ Tailwind ออก และรวม Bulma เข้ากับโปรเจ็กต์ของคุณ สิ่งนี้จะเกี่ยวข้องกับการเขียนสไตล์ใหม่สำหรับส่วนประกอบ Filament โดยใช้คลาส Bulma [1]
- การใช้เฟรมเวิร์ก CSS อื่น เช่น Bulma อาจทำให้เกิดปัญหาความเข้ากันได้กับฟีเจอร์และปลั๊กอินของ Filament ทีม Filament ขอแนะนำให้ใช้ Tailwind CSS เพื่อประสบการณ์ที่ดีที่สุด[3]
- อีกทางเลือกหนึ่งคือการใช้ Bulma ควบคู่ไปกับ Tailwind โดยใช้สไตล์ Bulma กับส่วนประกอบที่คุณกำหนดเอง ในขณะที่ยังคงใช้ Tailwind สำหรับส่วนประกอบ Filament หลัก อย่างไรก็ตาม การดำเนินการนี้อาจจำเป็นต้องเอาชนะสไตล์ Filament บางอย่าง[1]
โดยสรุป แม้ว่าในทางเทคนิคแล้วจะใช้ Bulma แทน Tailwind สำหรับธีม Filament ได้ แต่ต้องใช้การทำงานแบบกำหนดเองที่มากขึ้นอย่างมาก อาจทำให้เกิดปัญหาความเข้ากันได้ และไม่ได้รับการสนับสนุนอย่างเป็นทางการจากทีมงาน Filament แนวทางที่แนะนำคือใช้ Tailwind CSS เพื่อประสบการณ์ที่ดีที่สุดเมื่อสร้างแผงผู้ดูแลระบบ Filament
การอ้างอิง:[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