Kako konfigurirati putanje predložaka u Tailwind CSS-u

“ Stražnji vjetar CSS ” dobro je poznat svestrani CSS okvir koji stilizira HTML sadržaj uz pomoć ugrađenih i prilagođenih CSS klasa. Također je korisno prilagoditi navedeni predložak prema zahtjevima korisnika. Cijeli proces zahtijeva konfiguraciju predložaka u kojima će korisnik koristiti Tailwind CSS. Tailwind CSS se ne može primijeniti ako korisnik ne konfigurira put predloška. Dakle, konfiguracija staza predložaka je preduvjet i obavezna.

Ovaj post demonstrira postupak za konfiguriranje staza predložaka u Tailwind CSS-u.

Kako konfigurirati putanje predložaka u Tailwind CSS-u?

' tailwind.config.js ” konfiguracijska datoteka koristi se za konfiguriranje staza predložaka u koje korisnik želi ugraditi Tailwind CSS. Nije prisutan prema zadanim postavkama, no može se stvoriti u projektu pomoću upravitelja paketa 'npm'.

Ovaj odjeljak izvodi neke bitne korake za konfiguriranje staza predložaka u datoteci 'tailwind.config.js'.

Bilješka : Za implementaciju “Tailwind CSS”, prvo instalirajte “ Node.js ” aplikaciju u vašem sustavu putem navedene poveznice “ https://nodejs.org/en ” za izvršavanje naredbi.

Korak 1: Instalirajte 'TailwindCSS'
Prvo stvorite novi projekt pod nazivom “Project1” i otvorite ga u uređivaču koda. Sada otvorite novi terminal i instalirajte “Tailwind CSS” uz pomoć sljedeće naredbe:

npm instalirajte -D tailwindcss

U gornjoj naredbi, ' npm ” je upravitelj paketa čvora koji instalira “TailwindCSS”, kako slijedi:

Ovdje izlaz pokazuje da su 'Tailwind CSS' i njegovi paketi uspješno preuzeti.

Korak 2: Izradite konfiguracijsku datoteku Tailwind
Zatim izradite Tailwind CSS konfiguracijsku datoteku ' tailwind.config.js ” za proširenje njegove funkcionalnosti kao što je određivanje staza HTML predložaka, korisnički definiranih klasa i mnogih drugih pomoću ove naredbe:

npx tailwindcss init

Izlaz pokazuje da je navedena konfiguracijska datoteka stvorena. Sada pogledajte ' tailwind.config.js ' datoteka:

Korak 3: Dodajte Tailwind direktive u glavnu CSS datoteku
Sada, za dodavanje posebne funkcionalnosti stvorenom Tailwind projektu, dodajte sljedeće tri postojeće direktive za tailwind u glavni ' stil.css ' datoteka:

@baza stražnjeg vjetra;
komponente @stražnog vjetra;
@tailwind pomoćni programi;

U gornjem bloku koda:

baza : To je prvi sloj 'Tailwind CSS-a' koji prema zadanim postavkama mijenja stil web stranice poput boje pozadine, boje teksta ili obitelji fontova.
komponente : Ovaj drugi sloj dostupan je unutar klase 'spremnik' koja dodaje širinu prema veličini preglednika. U njegovu odjeljku korisnik može dodati vlastite kreirane vanjske komponente.
komunalije : To je treći sloj koji zbraja gotovo sve stilske klase kao što su sjene, boje, dodavanje, savijanje i mnoge druge klase.

Ove se direktive mogu vidjeti u sljedećem prozoru:

Korak 4: Izgradite CSS
Sada izgradite CSS pomoću alata Tailwind CLI izvršavanjem sljedeće naredbe. Skenirati će sve datoteke predložaka i izgraditi CSS u ' dist/output.css ' datoteka:

npx stražnji vjetarcss -i. / stil .css -o . / dist / izlaz.css --gledati

Može se uočiti da je gornja naredba uspješno izvršena. Sada struktura datoteke 'projekta1' izgleda ovako:

Korak 5: Napravite HTML predložak i konfigurirajte njegov put
Napravite HTML predložak u koji korisnik želi ugraditi 'Tailwind CSS', a zatim konfigurirajte njegov put u ' tailwind.config.js ”. Pogledajmo prvo sljedeći HTML predložak ' index.html ”:

< glava >
< veza href = '/dist/output.css' rel = 'list stilova' >
< / glava >
< tijelo >
< h2 razreda = 'text-center font-bold text-white bg-orange-500' >Dobro došli u Linuxhint!< / h2 >< br >
< h3 razreda = 'text-center font-bold text-blue-600 bg-pink-400' >Prvi vodič: Tailwind CSS Framework.< / h3 >< br >
< str razreda = 'text-center text-green-500' >Tailwind CSS je dobro poznati CSS okvir koji pomaže u postavljanju unaprijed definiranih CSS klasa na stil vaši HTML elementi.< / str >
< / tijelo >

U gornjim linijama koda:

Odjeljak 'glava' koristi ' ” oznaka za povezivanje stvorene/kompilirane CSS datoteke “ /dist/output.css ' s postojećom HTML datotekom ' index.html ”.
Odjeljak 'tijelo' prvo navodi '
” oznaka koja definira prvi podnaslov pomoću klase Tailwind “ Poravnanje teksta ” za podešavanje njegovog poravnanja u “središtu”, “ Težina fonta ” za “podebljavanje” teksta, “ Boja teksta ” za dodavanje navedene boje, i “ Boja pozadine ” za primjenu zadane boje pozadine.
Zatim, '
' i '
” oznake također koriste gore spomenute klase Tailwind za stiliziranje svog sadržaja.

Konfigurirajte put HTML predloška
Zatim otvorite ' tailwind.config.js ” i dodajte veze ili putanju u odjeljak “sadržaj” datoteke HTML predloška, tj. “index.html”:

sadržaj : [ './index.html' ]

Pritisnite “ Ctrl+S ” za spremanje novih promjena.

Korak 6: Izvršite HTML kod
Na kraju, izvršite HTML kod “index.html” na poslužitelju uživo i pogledajte njegov izlaz:

Izlaz

Kao što se vidi, izlaz prikazuje stilizirani HTML sadržaj uz pomoć Tailwind CSS-a.

Zaključak

Tailwind CSS koristi ' tailwind.config.js ” konfiguracijsku datoteku za konfiguraciju stvorenih staza HTML predloška. Određuje ' sadržaj ” odjeljak koji uključuje točnu stazu svih HTML predložaka, izvorne datoteke koje sadrže nazive klasa Tailwind i komponente JavaScripta. Skenira navedenu HTML datoteku i zatim implementira Tailwind CSS u njezin sadržaj. Ovaj post ilustrirao je cijeli postupak za konfiguriranje staza predložaka u Tailwind CSS-u.

Kako konfigurirati putanje predložaka u Tailwind CSS-u