Jak nakonfigurovat cesty šablony v Tailwind CSS

Tento příspěvek ukazuje postup konfigurace cest šablony v Tailwind CSS.

Jak nakonfigurovat cesty šablony v Tailwind CSS?

' tailwind.config.js ” konfigurační soubor se používá ke konfiguraci cest šablon, do kterých chce uživatel vložit CSS Tailwind. Ve výchozím nastavení není přítomen, lze jej však vytvořit v projektu pomocí správce balíčků „npm“.

Tato část provádí některé základní kroky ke konfiguraci cest šablony v souboru „tailwind.config.js“.

Poznámka : Chcete-li implementovat „Tailwind CSS“, nejprve nainstalujte „ Node.js “ aplikace ve vašem systému prostřednictvím poskytnutého odkazu “ https://nodejs.org/en ” pro provedení příkazů.

Krok 1: Nainstalujte „TailwindCSS“
Nejprve vytvořte nový projekt s názvem „Project1“ a otevřete jej v editoru kódu. Nyní otevřete nový terminál a nainstalujte „Tailwind CSS“ pomocí následujícího příkazu:

Ve výše uvedeném příkazu „ npm ” je správce balíčků uzlů, který instaluje „TailwindCSS“ následovně:

Zde výstup ukazuje, že „Tailwind CSS“ a jeho balíčky byly úspěšně staženy.

Krok 2: Vytvořte konfigurační soubor Tailwind
Dále vytvořte konfigurační soubor CSS Tailwind “ tailwind.config.js ” pro rozšíření jeho funkčnosti, jako je zadání cest šablon HTML, uživatelsky definované třídy a mnoho dalších pomocí tohoto příkazu:

Výstup ukazuje, že zadaný konfigurační soubor byl vytvořen. Nyní se podívejte na „ tailwind.config.js 'soubor:

Krok 3: Přidejte direktivy Tailwind do hlavního souboru CSS
Nyní, pro přidání speciálních funkcí do vytvořeného projektu Tailwind, přidejte následující tři již existující direktivy tailwind do hlavního „ styl.css 'soubor:

Ve výše uvedeném bloku kódu:

• základna : Je to první vrstva „Tailwind CSS“, která ve výchozím nastavení upravuje styl webové stránky, jako je barva pozadí, barva textu nebo rodina písem.
• komponenty : Tato druhá vrstva je dostupná ve třídě „container“, která přidává šířku podle velikosti prohlížeče. V jeho sekci může uživatel přidávat vlastní vytvořené externí komponenty.
• utility : Je to třetí vrstva, která sčítá téměř všechny třídy stylingu, jako jsou stíny, barvy, přidávání, ohýbání a mnoho dalších tříd.

Tyto směrnice lze vidět v následujícím okně:

Krok 4: Vytvořte CSS
Nyní vytvořte CSS pomocí nástroje Tailwind CLI provedením následujícího příkazu. Prohledá všechny soubory šablon a vytvoří CSS v „ dist/output.css 'soubor:

Lze pozorovat, že výše uvedený příkaz je úspěšně proveden. Struktura souboru „project1“ nyní vypadá takto:

Krok 5: Vytvořte HTML šablonu a nakonfigurujte její cestu
Vytvořte šablonu HTML, do které chce uživatel vložit „Tailwind CSS“, a poté nakonfigurujte její cestu v „ tailwind.config.js “. Nejprve se podívejme na následující šablonu HTML „ index.html “:

Ve výše uvedených řádcích kódu:

• Sekce „hlava“ používá „ ” tag pro propojení vytvořeného/zkompilovaného souboru CSS “ /dist/output.css “ se stávajícím souborem HTML “ index.html “.
• Část „tělo“ nejprve specifikuje „

  ” tag, který definuje první podnadpis pomocí třídy Tailwind “ Zarovnání textu “ pro úpravu jeho zarovnání na „střed“, „ Tloušťka písma “ na „tučné“ text, „ Barva textu “ pro přidání určené barvy a „ Barva pozadí ” pro použití dané barvy pozadí, resp.

• Dále, „

  “ a „

  Tagy také používají výše diskutované třídy Tailwind ke stylizaci svého obsahu.

Nakonfigurujte cestu šablony HTML
Dále otevřete „ tailwind.config.js “ a přidejte odkazy nebo cestu do části „obsah“ souboru šablony HTML, tj. „index.html“:

Lis ' Ctrl+S ” pro uložení nových změn.

Krok 6: Spusťte HTML kód
Nakonec spusťte HTML kód „index.html“ na živém serveru a podívejte se na jeho výstup:

Výstup

Jak je vidět, výstup zobrazuje stylizovaný obsah HTML s pomocí Tailwind CSS.

Závěr

Tailwind CSS používá „ tailwind.config.js ” konfigurační soubor pro konfiguraci vytvořených cest šablon HTML. Ta specifikuje „ obsah “, která obsahuje přesnou cestu ke všem šablonám HTML, zdrojovým souborům obsahujícím názvy tříd Tailwind a komponentám JavaScriptu. Prohledá zadaný soubor HTML a poté do jeho obsahu implementuje styl CSS Tailwind. Tento příspěvek ilustroval úplný postup konfigurace cest šablony v Tailwind CSS.