Filament je oblíbený tvůrce panelů Laravel Admin, který je pevně integrován s CSS pro styl CSS. Tailwind CSS je rámec CSS s nástrojem, který poskytuje třídy užitečnosti nízké úrovně, což vývojářům umožňuje efektivně vytvářet přizpůsobené návrhy uživatelského rozhraní. Mnoho vývojářů se však ptá, zda mohou místo CSS CSS použít jiný rámec CSS pro témata stylingu.
Přímá odpověď je, že vlákno je primárně navrženo tak, aby pracovalo s CSS na větru a její komponenty, témata a uživatelské rozhraní se silně spoléhaly na třídy a konvence využití Tailwindu. Tato těsná vazba znamená, že výplň Tailwind pro jiný rámec CSS není oficiálně podporováno nebo přímé. S určitým úsilím a přizpůsobením je však možné přizpůsobit další rámce CSS pro použití s vláknem, ale to zahrnuje vlastní budování motivů, převažující výchozí styly a možná přestavět některé části uživatelského rozhraní od nuly.
***
Závislost vlákna na CSS TAILWIND
Filament používá CSS Tailwind CSS jako svůj výchozí a základní stylingový rámec. Celý jeho návrhový systém a komponenty využívají třídy užitečnosti Tailwind pro rozvržení, mezery, barvy, typografii, citlivost, interaktivitu a tematiku. Výchozí uživatelské rozhraní administrátora je vytvořeno s ocasním větrem a mnoho pluginů a rozšíření vlákna také předpokládá Tailwind jako nadaci CSS.
Vzhledem k tomu, že CSS Tailwind používá přístup k užitku, témata vlákna zahrnují spíše přidávání a přizpůsobení nástrojů na ocasu než psaní tradičních CSS nebo se spoléhají na celosvětově definované třídy. To má za následek vysoce flexibilní a přizpůsobitelné uživatelské rozhraní, ale také znamená, že komponenty vlákna očekávají, že budou přítomny nástroje ocasu, aby byly správně vykresleny.
***
Používání jiných rámců CSS s vláknem: Výzvy a přístupy
Snaží se nahradit Tailwind CSS dalším rámcem CSS, jako je Bootstrap, Bulma, Foundation nebo Saveize Faces několik výzev:
-Názvy tříd a nástroje: Jiné rámce mají různé názvy tříd a metodiky CSS (např. Bootstrap používá sémantická názvy tříd jako `.btn`,` .Container`, zatímco Tailwind používá užitkové třídy jako `bg-blue-500`,` p-4`). Komponenty vlákna používají značně názvy tříd Tailwindu, takže výměnství CSS vyžaduje přepisovací třídy komponent nebo vytváření analogických stylů v novém rámci.
- Systémy citlivosti a mřížky: Tailwind používá své vlastní responzivní návrhové nástroje založené na mobilním prvním systému mřížky. Jiné rámce mají různé definice mřížky a bodů zlomu, které nemusí čistě mapovat přístup k Tailwindu.
- Vlastní komponenty a interakce: Mnoho složek UI vlákna integruje přechody, animace a státy založené na ocasu. Je třeba je třeba replikovat pomocí schopností JavaScriptu nebo jiných CSS Frameworks.
-Proces sestavení: Proces sestavení vlákna obvykle zahrnuje konfiguraci kompilátoru Tailwind Just-In-Time (JIT) pro generování pouze potřebných tříd CSS. Použití jiného rámce znamená nastavení nebo výměnu potrubí sestavení CSS.
Navzdory těmto překážkám mohou pokročilí uživatelé, kteří chtějí použít jiný rámec, zvážit:
- Vytváření tématu vlastního vlákna: Výchozí zhlédnutí a komponenty čepele můžete přepsat tak, aby pomocí tříd CSS podle vašeho výběru použily třídy CSS Framework namísto Tailwind. To vyžaduje hlubokou znalost jak vláknových interních, tak vašeho vybraného rámce CSS.
- Pomocí rozšíření kompatibilních s ocasním větrem: Některé rámce CSS nebo knihovny uživatelského rozhraní staví na vrcholu nebo jsou kompatibilní s ocasním větrem (například Daisyui), které mohou přidat předem zabudované komponenty a snadnější tematiku na vrcholu CSS, aniž by to plně vyměnily.
- Nahrazení CSS TAILWIND CSS vanilkovým CSS nebo vlastním nástrojem: Namísto úplného rámce CSS někteří vývojáři vytvářejí minimální knihovnu nástrojů CSS inspirovanou přístupem Tailwindu. To může fungovat, ale znamená budování mnoha stylů.
***
Alternativy k Tailwind CSS pro stylingové vlákno
Pokud chcete použít jiný rámec CSS pro vlákno, zde je stručný přehled některých populárních alternativ a o tom, jak porovnávají tento případ použití:
-Bootstrap: Nejrozšířenější rámec CSS nabízí styl založený na komponentách s předdefinovanými třídami pro knoflíky, formy, mřížky atd. Bootstrap je těžší než ocas a ne první. Integrace bootstrapu s vláknem by vyžadovala přepisování všech tříd Tailwind do šablon vlákna s třídami bootstrapu a případně přepisování interaktivního chování s JavaScriptem Bootstrap.
- Bulma: Moderní, lehký rámec CSS založený na Flexboxu. Je modulární a používá spíše názvy sémantických tříd než první třídy. Podobně jako Bootstrap, použití Bulmy s vláknem vyžaduje vlastní přepsání motivů a přemapování nástrojů Tailwind na ekvivalenty Bulma.
- Nadace: Další komplexní rámec CSS podporuje rozvržení mřížky a pohotovosti. Jeho křivka učení a složitost integrace jsou podobné Bootstrap a Bulmě.
- Uplatňuje se nebo materiál UI: CSS Frameworks založené na designu materiálu společnosti Google. Nabízejí předem vytvořené komponenty UI stylizované konzistentně s principy designu materiálu. Jejich použití namísto Tailwind znamená přestavět uživatelské rozhraní vlákna tak, aby odpovídalo materiálním pokynům a přizpůsobovalo komponenty s materiálem specifickými třídami a skripty.
- DAISYUI: Není to náhrada, ale plugin pro CSS Tailwind, který poskytuje třídy komponent pro zjednodušení stylu. Může snížit vaše pracovní zátěž CSS a přitom udržovat Tailwind jako základní rámec, prospěšný pro uživatele vlákna, kteří chtějí rychlejší styl, aniž by se vzdali Tailwind.
***
Technické kroky k použití jiného rámce CSS s vláknem
Pokud se rozhodnete pokračovat s jiným rámcem CSS, zde jsou obecné technické kroky:
1. Zakázat nebo odstranit CSS TAILWIND CSS z potrubí vlákno Asset, aby se zabránilo střekům.
2. Přidejte rámec CSS výběru do vašeho projektu Laravel prostřednictvím NPM, CDN nebo přímého zahrnutí souboru.
3. Přepsat Zobrazení a komponenty vlákna: Publikovat pohledy vlákna pomocí „PHP Artisana Prodence: Publish`, poté upravte šablony Blade, aby nahradily třídy Tailwind třídami vašeho rámce.
4. Přestavba vlastních komponent: Pokud se vlákno spoléhá na třídy Tailwind pro interaktivní komponenty, přepište tyto interaktivní části pomocí JavaScript nebo JavaScript Utilities ve vašem rámci CSS.
5. Upravit konfiguraci: Aktualizujte konfigurační soubory vlákna v případě potřeby pro přizpůsobení cest CSS a JS Asset.
6. Test UI důkladně: Responzivní design, dostupnost a kompatibilita prohlížeče je třeba ověřit, protože se může vzorek návrhu nového rámce lišit.
***
Výhody a nevýhody používání jiných rámců s vláknem
Výhody:
- Můžete využít stávající systémy znalostí a designu, které jsou obeznámeny s vaším týmem.
- Opětovné použití rámců CSS používaných v jiných částech vaší aplikace pro konzistenci.
- Pokud je to preferováno, možná používejte rámce s více hotovými komponenty uživatelského rozhraní.
Nevýhody:
- Vyžaduje značné úsilí, protože vlákno je ve výchozím nastavení vyráběno pro CSS ocasu.
- Ztrácí přísné výhody integrace, jako je generování JIT CSS, snadnost tematiky a flexibilita nejprve.
- potenciálně má za následek těžší CSS a delší dobu načítání.
- Může komplikovat aktualizaci a údržbu vlákna a jeho témat.
***
Shrnutí
Systém Tématického systému vlákna a komponenty UI jsou hluboce integrovány s CSS Tailwind, což činí Tailwind výchozí a doporučený rámec CSS pro témata stylingového vlákna. I když je technicky možné používat jiné rámce CSS, jako jsou Bootstrap, Bulma, Foundation nebo se zhmotňují vytvořením vlastních témat a převažujících názorů, vyžaduje podstatné přizpůsobení a dobré porozumění vláknovi i alternativnímu rámci.
Pro mnoho vývojářů místo toho, aby nahradili úplně nalezení, za použití rozšíření nebo pluginů, jako jsou Daisyui, které staví na CSS ocasu, nabízí jednoduché tematiku střední půdy s předem zabudovanými komponenty, aniž by ztratila výhody Tailwindu.
Závěrem lze říci, že i když můžete použít jiný rámec CSS s vláknem rozsáhlým přizpůsobením, CSS Tailwind zůstává primárním a nejjednodušší volbou pro vývoj motivů vlákna kvůli jeho hluboké integraci, nejprve flexibilitě a optimalizací výkonu přizpůsobené pro návrhový systém vlákna. Pokud je nezbytný používání jiného rámce, připravte se na významné úsilí o vývojové úsilí o přizpůsobení složek uživatelského rozhraní a stylů vlákna na paradigma tohoto rámce.
Tento přístup zajišťuje konzistenci uživatelského rozhraní, udržovatelnost a lepší pákový efekt vlastností vlákna v projektech panelu Laravel Admin.