Kaip sukonfigūruoti šablono kelius „Tailwind CSS“.

Šiame įraše demonstruojama „Tailwind CSS“ šablonų kelių konfigūravimo procedūra.

Kaip sukonfigūruoti šablono kelius „Tailwind CSS“?

„ tailwind.config.js ” konfigūracijos failas naudojamas šablono keliams, į kuriuos vartotojas nori įterpti Tailwind CSS, konfigūruoti. Pagal numatytuosius nustatymus jo nėra, tačiau jį galima sukurti projekte naudojant „npm“ paketų tvarkyklę.

Šiame skyriuje atliekami keli esminiai žingsniai, norint sukonfigūruoti šablono kelius faile „tailwind.config.js“.

Pastaba : Norėdami įdiegti „Tailwind CSS“, pirmiausia įdiekite „ Node.js “ programa jūsų sistemoje per pateiktą nuorodą “ https://nodejs.org/en “ norėdami vykdyti komandas.

1 veiksmas: įdiekite „TailwindCSS“
Pirmiausia sukurkite naują projektą pavadinimu „Project1“ ir atidarykite jį kodo rengyklėje. Dabar atidarykite naują terminalą ir įdiekite „Tailwind CSS“ naudodami šią komandą:

Aukščiau pateiktoje komandoje „ npm “ yra mazgo paketų tvarkyklė, kuri įdiegia „TailwindCSS“ taip:

Čia išvestis rodo, kad „Tailwind CSS“ ir jo paketai sėkmingai atsisiunčiami.

2 veiksmas: sukurkite „Tailwind“ konfigūracijos failą
Tada sukurkite „Tailwind CSS“ konfigūracijos failą “ tailwind.config.js “ norėdami išplėsti savo funkcijas, pvz., nurodyti HTML šablono kelius, vartotojo nustatytas klases ir daugelį kitų, naudodami šią komandą:

Išvestis rodo, kad nurodytas konfigūracijos failas buvo sukurtas. Dabar pažvelkite į „ tailwind.config.js “ failas:

3 veiksmas: pridėkite Tailwind direktyvas į pagrindinį CSS failą
Dabar, norėdami pridėti specialių funkcijų prie sukurto Tailwind projekto, pridėkite šias tris jau esamas tailwind direktyvas pagrindinėje ' stilius.css “ failas:

Aukščiau esančiame kodo bloke:

• bazė : Tai pirmasis „Tailwind CSS“ sluoksnis, pagal numatytuosius nustatymus modifikuojantis tinklalapio stilių, pvz., fono spalvą, teksto spalvą arba šriftų šeimą.
• komponentai : Šis antrasis sluoksnis yra „konteinerio“ klasėje, kuri prideda plotį pagal naršyklės dydį. Jo skyriuje vartotojas gali pridėti savo sukurtus išorinius komponentus.
• Komunalinės paslaugos : Tai trečiasis sluoksnis, sujungiantis beveik visas stiliaus klases, tokias kaip šešėliai, spalvos, pridėjimas, lankstumas ir daugelis kitų klasių.

Šias direktyvas galite pamatyti šiame lange:

4 veiksmas: sukurkite CSS
Dabar sukurkite CSS naudodami Tailwind CLI įrankį, vykdydami šią komandą. Jis nuskaitys visus šablono failus ir sukurs CSS „ dist/output.css “ failas:

Galima pastebėti, kad aukščiau pateikta komanda sėkmingai vykdoma. Dabar „projekto1“ failo struktūra atrodo taip:

5 veiksmas: sukurkite HTML šabloną ir sukonfigūruokite jo kelią
Sukurkite HTML šabloną, kuriame vartotojas nori įterpti „Tailwind CSS“, tada sukonfigūruokite jo kelią „ tailwind.config.js “. Pirmiausia pažvelkime į šį HTML šabloną ' index.html “:

Aukščiau pateiktose kodo eilutėse:

• Skyriuje „galva“ naudojama „ 'žyma, skirta susieti sukurtą / sudarytą CSS failą' /dist/output.css 'su esamu HTML failu' index.html “.
• Skyriuje „body“ pirmiausia nurodoma „

  “ žyma, apibrėžianti pirmąją paantraštę naudojant Tailwind klasę “ Teksto lygiavimas “ norėdami pakoreguoti jo išlygiavimą „centre“, „ Šrifto svoris “, norėdami „paryškinti“ tekstą, „ Teksto spalva “, kad pridėtumėte nurodytą spalvą, ir „ Fono spalva “, kad atitinkamai pritaikytumėte nurodytą fono spalvą.

• Toliau „

  ' ir '

  “ žymos taip pat naudoja aukščiau aptartas „Tailwind“ klases savo turiniui stilizuoti.

Konfigūruokite HTML šablono kelią
Tada atidarykite „ tailwind.config.js “ ir pridėkite nuorodas arba kelią HTML šablono failo skiltyje „turinys“, t. y. „index.html“:

Paspauskite ' Ctrl + S “, kad išsaugotumėte naujus pakeitimus.

6 veiksmas: paleiskite HTML kodą
Galiausiai paleiskite HTML kodą „index.html“ tiesioginiame serveryje ir peržiūrėkite jo išvestį:

Išvestis

Kaip matyti, išvestis rodo stiliaus HTML turinį naudojant Tailwind CSS.

Išvada

Tailwind CSS naudoja „ tailwind.config.js “ konfigūracijos failą, kad sukonfigūruotumėte sukurtus HTML šablono kelius. Jame nurodoma „ turinys “ skyrių, kuriame yra tikslus visų HTML šablonų kelias, šaltinio failai su Tailwind klasių pavadinimais ir „JavaScript“ komponentai. Jis nuskaito nurodytą HTML failą ir savo turinyje įdiegia Tailwind CSS. Šis įrašas iliustruoja visą šablono kelių konfigūravimo procedūrą „Tailwind CSS“.