Vaikka Filament on ensisijaisesti suunniteltu toimimaan Tailwind CSS:n kanssa, on mahdollista käyttää erilaista CSS-kehystä teemojen luomiseen, vaikka se saattaa vaatia enemmän mukautettua työtä. Tässä on muutamia vaihtoehtoja:
1. Toisen CSS-kehyksen käyttäminen Tailwindin rinnalla:
- Voit sisällyttää projektiisi haluamasi CSS-kehyksen Tailwindin rinnalle.
- Tämän avulla voit käyttää Tailwindia ydinfilament-komponenteille ja omaa kehystä mukautettuun muotoiluun.
- Saatat kuitenkin joutua ohittamaan joitain Tailament-tyylejä, jotta kehys toimisi saumattomasti.
2. Tailwindin korvaaminen toisella kehyksellä:
- Tailwind on mahdollista korvata kokonaan toisella CSS-kehyksellä, kuten Bootstrap tai Foundation.
- Tämä sisältäisi Tailwindin ja sen lisäosien poistamisen ja valitsemasi kehyksen integroinnin.
- Sinun on luotava uudelleen Filament-komponenttien tyylit uudella kehykselläsi.
- Tämä lähestymistapa vaatii enemmän vaivaa, eikä Filament välttämättä tue sitä virallisesti.
3. Käyttäen kehysagnostista lähestymistapaa:
- Sen sijaan, että luottaisit tiettyyn CSS-kehykseen, voit käyttää muotoilussa puitteet-agnostista lähestymistapaa.
- Tämä edellyttää pelkän CSS:n kirjoittamista tai esiprosessorin, kuten Sass/Less, käyttöä ja tyylien soveltamista suoraan HTML-elementteihin ja luokkiin.
- Vaikka tämä tarjoaa eniten joustavuutta, se vaatii enemmän manuaalista työtä komponenttien muotoiluun ja johdonmukaisuuden säilyttämiseen.
Riippumatta lähestymistavasta, muista, että eri CSS-kehyksen käyttäminen voi vaatia enemmän mukautettua työtä, eikä Filament välttämättä tue sitä virallisesti. Filament-tiimi suosittelee Tailwind CSS:n käyttöä parhaan kokemuksen ja yhteensopivuuden saavuttamiseksi kehyksen ominaisuuksien ja laajennusten kanssa[1][2].
Jos päätät käyttää toista kehystä, muista testata mukautettu teemasi perusteellisesti ja olla valmis käsittelemään kaikki yhteensopivuusongelmat, joita saattaa ilmetä Filamentin päivitysten aikana.
Lainaukset:[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