Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Can I use a different CSS framework instead of Tailwind for Filament themes


Can I use a different CSS framework instead of Tailwind for Filament themes


While Filament is primarily designed to work with Tailwind CSS, it is possible to use a different CSS framework for creating themes, though it may require more custom work. Here are a few options:

1. Using a different CSS framework alongside Tailwind:
- You can include your preferred CSS framework alongside Tailwind in your project.
- This allows you to use Tailwind for the core Filament components and your own framework for custom styling.
- However, you may need to override some Tailament styles to make your framework work seamlessly.

2. Replacing Tailwind with another framework:
- It is possible to replace Tailwind entirely with another CSS framework like Bootstrap or Foundation.
- This would involve removing Tailwind and its plugins, and integrating your chosen framework.
- You would need to recreate the styles for Filament components using your new framework.
- This approach requires more effort and may not be officially supported by Filament.

3. Using a framework-agnostic approach:
- Instead of relying on a specific CSS framework, you can use a framework-agnostic approach to styling.
- This involves writing plain CSS or using a preprocessor like Sass/Less and applying styles directly to HTML elements and classes.
- While this provides the most flexibility, it requires more manual work to style components and maintain consistency.

Regardless of the approach, keep in mind that using a different CSS framework may require more custom work and may not be officially supported by Filament. The Filament team recommends using Tailwind CSS for the best experience and compatibility with the framework's features and plugins[1][2].

If you do decide to use a different framework, make sure to thoroughly test your custom theme and be prepared to handle any compatibility issues that may arise during Filament updates.

Citations:
[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