Ako konfigurovať cesty šablóny v Tailwind CSS

Tento príspevok ukazuje postup konfigurácie ciest šablón v CSS Tailwind.

Ako konfigurovať cesty šablóny v Tailwind CSS?

' tailwind.config.js ” konfiguračný súbor sa používa na konfiguráciu ciest šablón, do ktorých chce používateľ vložiť CSS Tailwind. V predvolenom nastavení nie je prítomný, dá sa však vytvoriť v projekte pomocou správcu balíkov „npm“.

Táto časť obsahuje niekoľko základných krokov na konfiguráciu ciest šablóny v súbore „tailwind.config.js“.

Poznámka : Ak chcete implementovať „Tailwind CSS“, najskôr nainštalujte „ Node.js “ aplikácie vo vašom systéme prostredníctvom poskytnutého odkazu “ https://nodejs.org/en ” na vykonanie príkazov.

Krok 1: Nainštalujte TailwindCSS
Najprv vytvorte nový projekt s názvom „Project1“ a otvorte ho v editore kódu. Teraz otvorte nový terminál a nainštalujte „Tailwind CSS“ pomocou nasledujúceho príkazu:

Vo vyššie uvedenom príkaze „ npm ” je správca balíkov uzla, ktorý inštaluje „TailwindCSS“ nasledovne:

Tu výstup ukazuje, že „Tailwind CSS“ a jeho balíčky boli úspešne stiahnuté.

Krok 2: Vytvorte konfiguračný súbor Tailwind
Potom vytvorte konfiguračný súbor CSS Tailwind “ tailwind.config.js ” na rozšírenie jeho funkčnosti, ako je špecifikovanie ciest šablón HTML, tried definovaných používateľom a mnohých ďalších pomocou tohto príkazu:

Výstup ukazuje, že zadaný konfiguračný súbor bol vytvorený. Teraz sa pozrite na „ tailwind.config.js súbor:

Krok 3: Pridajte smernice Tailwind do hlavného súboru CSS
Teraz, ak chcete do vytvoreného projektu Tailwind pridať špeciálne funkcie, pridajte nasledujúce tri už existujúce príkazy pre zadný vietor do hlavného „ style.css súbor:

Vo vyššie uvedenom bloku kódu:

• základňu : Je to prvá vrstva „Tailwind CSS“, ktorá predvolene upravuje štýl webovej stránky, napríklad farbu pozadia, farbu textu alebo rodinu písiem.
• komponentov : Táto druhá vrstva je dostupná v triede „container“, ktorá pridáva šírku podľa veľkosti prehliadača. V jeho sekcii môže používateľ pridávať vlastné vytvorené externé komponenty.
• komunálne služby : Je to tretia vrstva, ktorá zhŕňa takmer všetky triedy štýlu, ako sú tiene, farby, pridávanie, ohýbanie a mnoho ďalších tried.

Tieto smernice môžete vidieť v nasledujúcom okne:

Krok 4: Vytvorte CSS
Teraz vytvorte CSS pomocou nástroja Tailwind CLI vykonaním nasledujúceho príkazu. Naskenuje všetky súbory šablón a vytvorí CSS v „ dist/output.css súbor:

Je možné pozorovať, že vyššie uvedený príkaz sa úspešne vykoná. Teraz štruktúra súboru „project1“ vyzerá takto:

Krok 5: Vytvorte HTML šablónu a nakonfigurujte jej cestu
Vytvorte šablónu HTML, do ktorej chce používateľ vložiť „Tailwind CSS“, a potom nakonfigurujte jej cestu v „ tailwind.config.js “. Najprv sa pozrime na nasledujúcu šablónu HTML „ index.html “:

Vo vyššie uvedených riadkoch kódu:

• Sekcia „hlava“ používa „ ” tag na prepojenie vytvoreného/kompilovaného súboru CSS “ /dist/output.css “ s existujúcim súborom HTML “ index.html “.
• Časť „telo“ najprv špecifikuje „

  ” tag, ktorý definuje prvý podnadpis pomocou triedy Tailwind “ Zarovnanie textu “, aby ste upravili jeho zarovnanie na „stred“, „ Hmotnosť písma “ na „tučné“ text, „ Farba textu “, ak chcete pridať špecifikovanú farbu, a „ Farba pozadia ” použiť danú farbu pozadia, resp.

• Ďalej, „

  “ a „

  ” tagy tiež používajú vyššie diskutované triedy Tailwind na úpravu svojho obsahu.

Nakonfigurujte cestu k šablóne HTML
Ďalej otvorte „ tailwind.config.js “ a pridajte odkazy alebo cestu do sekcie „obsah“ súboru šablóny HTML, t. j. „index.html“:

Stlačte ' Ctrl+S ” na uloženie nových zmien.

Krok 6: Spustite HTML kód
Nakoniec spustite HTML kód „index.html“ na živom serveri a pozrite si jeho výstup:

Výkon

Ako vidíte, výstup zobrazuje štylizovaný obsah HTML pomocou CSS Tailwind.

Záver

Tailwind CSS používa „ tailwind.config.js ” konfiguračný súbor na konfiguráciu vytvorených ciest HTML šablón. Špecifikuje „ obsahu “, ktorá obsahuje presnú cestu všetkých šablón HTML, zdrojové súbory obsahujúce názvy tried Tailwind a komponenty JavaScript. Naskenuje zadaný súbor HTML a potom do jeho obsahu implementuje CSS Tailwind. Tento príspevok ilustroval úplný postup konfigurácie ciest šablón v CSS Tailwind.