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:
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:
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:
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 ”:
< 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”:
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.