Kuidas Tailwind CSS-is malliteid konfigureerida

“ Tailtuule CSS ” on hea mainega mitmekülgne CSS-raamistik, mis kujundab HTML-i sisu sisseehitatud ja kohandatud CSS-klasside abil. Samuti on kasulik kohandada määratud malli vastavalt kasutaja nõuetele. Kogu protsess nõuab mallide konfigureerimist, kus kasutaja kavatseb Tailwind CSS-i kasutada. Tailwind CSS-i ei saa rakendada, kui kasutaja ei konfigureeri malli teed. Seega on malliteede konfigureerimine eeltingimus ja kohustuslik.

See postitus demonstreerib Tailwind CSS-i malliteede konfigureerimise protseduuri.

Kuidas Tailwind CSS-is malliteid konfigureerida?

' tailwind.config.js ” konfiguratsioonifaili kasutatakse malliteede konfigureerimiseks, kuhu kasutaja soovib Tailwind CSS-i manustada. Vaikimisi seda pole, kuid selle saab projektis luua paketihalduri 'npm' abil.

Selles jaotises tehakse mõned olulised sammud, et konfigureerida faili „tailwind.config.js” malliteed.

Märge : Tailwind CSS-i rakendamiseks installige esmalt Node.js 'rakendus teie süsteemis esitatud lingi kaudu' https://nodejs.org/en ” käskude täitmiseks.

1. samm: installige 'TailwindCSS'
Kõigepealt looge uus projekt nimega 'Project1' ja avage see koodiredaktoris. Nüüd avage uus terminal ja installige 'Tailwind CSS' järgmise käsu abil:

npm install -D tailwindcss

Ülaltoodud käsus ' npm ” on sõlme paketihaldur, mis installib „TailwindCSS” järgmiselt:

Siin näitab väljund, et 'Tailwind CSS' ja selle paketid on edukalt alla laaditud.

2. samm: looge Tailwindi konfiguratsioonifail
Järgmisena looge Tailwind CSS-i konfiguratsioonifail ' tailwind.config.js ', et laiendada selle funktsioone, näiteks HTML-malli teede, kasutaja määratletud klasside ja paljude teiste määramine, kasutades seda käsku:

npx tailwindcss init

Väljund näitab, et määratud konfiguratsioonifail on loodud. Nüüd vaadake ' tailwind.config.js ” fail:

3. samm: lisage Tailwindi direktiivid CSS-i põhifaili
Nüüd lisage loodud Tailwindi projektile erifunktsioonide lisamiseks järgmised kolm olemasolevat tailtuule käskkirja. stiil.css ” fail:

@tailwind base;
@tailwind komponendid;
@tailwind kommunaalteenused;

Ülaltoodud koodiplokis:

alus : see on 'Tailwind CSS' esimene kiht, mis muudab vaikimisi veebilehe stiili, näiteks taustavärvi, teksti värvi või fondiperekonda.
komponendid : see teine kiht on saadaval konteineriklassis, mis lisab laiuse vastavalt brauseri suurusele. Selle jaotises saab kasutaja lisada enda loodud väliseid komponente.
kommunaalteenused : see on kolmas kiht, mis liidab peaaegu kõik stiiliklassid, nagu varjud, värvid, lisamine, paindumine ja paljud muud klassid.

Neid juhiseid näete järgmises aknas:

4. samm: looge CSS
Nüüd looge CSS, kasutades Tailwind CLI tööriista, käivitades järgmise käsu. See skannib kõik mallifailid ja loob CSS-i jaotises ' dist/output.css ” fail:

npx tailwindcss -i . / stiilis .css -o . / dist / output.css --watch

Võib täheldada, et ülaltoodud käsk täidetakse edukalt. Nüüd näeb projekti “projekt1” failistruktuur välja selline:

5. samm: looge HTML-mall ja konfigureerige selle tee
Looge HTML-mall, millesse kasutaja soovib manustada 'Tailwind CSS-i' ja seejärel konfigureerige selle tee ' tailwind.config.js ”. Vaatame esmalt järgmist HTML-i malli ' index.html ”:

< pea >
< link href = '/dist/output.css' rel = 'laadileht' >
< / pea >
< keha >
< h2 klass = 'text-center font-bold text-white bg-orange-500' >Tere tulemast Linuxhinti!< / h2 >< br >
< h3 klass = 'text-center font-bold text-blue-600 bg-pink-400' >Esimene õpetus: Tailwind CSS Framework.< / h3 >< br >
< lk klass = 'tekstikeskus tekst-roheline-500' >Tailwind CSS on tuntud CSS-i raamistik, mis aitab seadistada eelmääratletud CSS-i klasse stiilis teie HTML-i elemente.< / lk >
< / keha >

Ülaltoodud koodiridades:

Jaotises 'pea' kasutatakse ' ' märgend loodud/kompileeritud CSS-faili linkimiseks ' /dist/output.css 'olemasoleva HTML-failiga' index.html ”.
Jaotises 'keha' määratakse esmalt '
märgend, mis määrab esimese alampealkirja klassi Tailwind abil Teksti joondamine ', et reguleerida selle joondust 'keskel', ' Fondi kaal 'teksti paksuks muutmiseks', ' Teksti värv ', et lisada määratud värv, ja ' Taustavärv ”, et rakendada vastavalt antud taustavärvi.
Järgmiseks '
' ja '
” sildid kasutavad oma sisu kujundamiseks ka ülalpool käsitletud Tailwindi klasse.

HTML-malli tee seadistamine
Järgmisena avage ' tailwind.config.js ja lisage lingid või tee HTML-i mallifaili jaotisesse 'sisu', st 'index.html':

sisu : [ './index.html' ]

Vajutage ' Ctrl+S ” uute muudatuste salvestamiseks.

6. samm: käivitage HTML-kood
Lõpuks käivitage reaalajas serveris HTML-kood 'index.html' ja vaadake selle väljundit:

Väljund

Nagu näha, näitab väljund stiilis HTML-i sisu Tailwind CSS-i abil.

Järeldus

Tailwind CSS kasutab tailwind.config.js ” konfiguratsioonifail loodud HTML-malli teede seadistamiseks. See täpsustab ' sisu ” jaotis, mis sisaldab kõigi HTML-mallide täpset teed, Tailwindi klassinimesid sisaldavaid lähtefaile ja JavaScripti komponente. See skannib määratud HTML-faili ja rakendab seejärel oma sisus Tailwind CSS-i. See postitus illustreeris Tailwind CSS-i malli teede konfigureerimise täielikku protseduuri.

Kuidas Tailwind CSS-is malliteid konfigureerida