Filament는 기본적으로 Tailwind CSS와 함께 작동하도록 설계되었지만 Bulma CSS를 대신 사용할 수도 있습니다. 하지만 더 많은 맞춤 작업이 필요할 수 있고 공식적으로 지원되지 않습니다. 다음은 몇 가지 핵심 사항입니다.
- Filament는 Tailwind CSS와 함께 작동하도록 설계된 사전 구축된 구성 요소 및 도구 세트를 제공합니다. 대신 Bulma를 사용하려면 이러한 구성 요소의 스타일을 처음부터 다시 만들어야 합니다[1].
- Bulma는 반응형 인터페이스를 구축하는 간단하고 유연한 방법을 제공하는 Flexbox 기반의 최신 CSS 프레임워크입니다. 여기에는 쉽게 사용자 정의할 수 있는 사전 설계된 UI 구성 요소가 포함되어 있습니다[2].
- Bulma를 Filament와 함께 사용하려면 Tailwind와 해당 플러그인을 제거하고 Bulma를 프로젝트에 통합해야 합니다. 여기에는 Bulma 클래스[1]를 사용하여 Filament 구성 요소의 스타일을 다시 작성하는 작업이 포함됩니다.
- Bulma와 같은 다른 CSS 프레임워크를 사용하면 Filament의 기능 및 플러그인과의 호환성 문제가 발생할 수 있습니다. Filament 팀은 최고의 경험을 위해 Tailwind CSS를 사용할 것을 권장합니다[3].
- 또 다른 접근 방식은 Tailwind와 함께 Bulma를 사용하여 Bulma 스타일을 사용자 정의 구성 요소에 적용하는 동시에 핵심 Filament 구성 요소에는 Tailwind를 사용하는 것입니다. 그러나 이를 위해서는 일부 필라멘트 스타일[1]을 재정의해야 할 수도 있습니다.
요약하면 Filament 테마에 Tailwind 대신 Bulma를 사용하는 것이 기술적으로 가능하지만 훨씬 더 많은 사용자 정의 작업이 필요하고 호환성 문제가 발생할 수 있으며 Filament 팀에서 공식적으로 지원하지 않습니다. 권장되는 접근 방식은 Filament 관리 패널을 구축할 때 최상의 경험을 위해 Tailwind CSS를 사용하는 것입니다.
인용:[1] https://stackoverflow.com/questions/75169839/progressively-replacing-bulma-with-tailwind
[2] https://blog.openreplay.com/tailwind-vs-bulma/
[3] https://ilamentphp.com/community/easy-way-to-create-a-filment-theme-in-mins
[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