Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon ¿Puedo usar un marco CSS diferente en lugar de Tailwind para los temas de Filament?


¿Puedo usar un marco CSS diferente en lugar de Tailwind para los temas de Filament?


Si bien Filament está diseñado principalmente para funcionar con Tailwind CSS, es posible utilizar un marco CSS diferente para crear temas, aunque puede requerir un trabajo más personalizado. Aquí hay algunas opciones:

1. Usando un marco CSS diferente junto con Tailwind:
- Puedes incluir tu marco CSS preferido junto con Tailwind en tu proyecto.
- Esto le permite utilizar Tailwind para los componentes principales de Filament y su propio marco para un estilo personalizado.
- Sin embargo, es posible que tengas que anular algunos estilos de Tailament para que tu marco funcione sin problemas.

2. Reemplazar Tailwind con otro marco:
- Es posible reemplazar Tailwind por completo con otro marco CSS como Bootstrap o Foundation.
- Esto implicaría eliminar Tailwind y sus complementos e integrar el marco elegido.
- Necesitará recrear los estilos de los componentes de Filament utilizando su nuevo marco.
- Este enfoque requiere más esfuerzo y es posible que Filament no lo admita oficialmente.

3. Utilizando un enfoque independiente del marco:
- En lugar de depender de un marco CSS específico, puedes utilizar un enfoque de estilo independiente del marco.
- Esto implica escribir CSS simple o usar un preprocesador como Sass/Less y aplicar estilos directamente a elementos y clases HTML.
- Si bien esto proporciona la mayor flexibilidad, requiere más trabajo manual para diseñar los componentes y mantener la coherencia.

Independientemente del enfoque, tenga en cuenta que el uso de un marco CSS diferente puede requerir un trabajo más personalizado y es posible que Filament no lo admita oficialmente. El equipo de Filament recomienda utilizar Tailwind CSS para obtener la mejor experiencia y compatibilidad con las funciones y complementos del marco[1][2].

Si decide utilizar un marco diferente, asegúrese de probar minuciosamente su tema personalizado y esté preparado para manejar cualquier problema de compatibilidad que pueda surgir durante las actualizaciones de Filament.

Citas:
[1] https://filamentphp.com/community/easy-way-to-create-a-filament-theme-in- Minutes
[2] https://docs.laravel-filament.cn/docs/2.x/admin/appearance/
[3] https://github.com/yepsua/filament-themes
[4] https://filamentphp.com/docs/3.x/panels/themes
[5] https://github.com/filamentphp/filament/discussions/9604