Kā konfigurēt veidņu ceļus Tailwind CSS

' Tailwind CSS ” ir daudzpusīgs CSS ietvars ar labu reputāciju, kas veido HTML satura stilus, izmantojot iebūvētās un pielāgotās CSS klases. Ir arī noderīgi pielāgot norādīto veidni atbilstoši lietotāja prasībām. Visam procesam ir jākonfigurē veidnes, kurās lietotājs izmantos Tailwind CSS. Tailwind CSS nevar lietot, ja lietotājs nekonfigurē veidnes ceļu. Tātad veidņu ceļu konfigurācija ir priekšnoteikums un obligāta.

Šajā ziņojumā ir parādīta procedūra veidņu ceļu konfigurēšanai Tailwind CSS.

Kā konfigurēt veidņu ceļus Tailwind CSS?

' tailwind.config.js ” konfigurācijas fails tiek izmantots, lai konfigurētu veidnes ceļus, kuros lietotājs vēlas iegult Tailwind CSS. Pēc noklusējuma tas nav pieejams, taču to var izveidot projektā, izmantojot pakotņu pārvaldnieku “npm”.

Šajā sadaļā ir veiktas dažas būtiskas darbības, lai konfigurētu veidnes ceļus failā “tailwind.config.js”.

Piezīme : Lai ieviestu “Tailwind CSS”, vispirms instalējiet “ Node.js lietojumprogramma jūsu sistēmā, izmantojot norādīto saiti https://nodejs.org/en ”, lai izpildītu komandas.

1. darbība: instalējiet “TailwindCSS”
Vispirms izveidojiet jaunu projektu ar nosaukumu “Project1” un atveriet to koda redaktorā. Tagad atveriet jauno termināli un instalējiet “Tailwind CSS”, izmantojot šādu komandu:

npm instalēt -D tailwindcss

Iepriekš minētajā komandā ' npm ” ir mezgla pakotņu pārvaldnieks, kas instalē “TailwindCSS” šādi:

Šeit izvade parāda, ka “Tailwind CSS” un tā pakotnes ir veiksmīgi lejupielādētas.

2. darbība: izveidojiet Tailwind konfigurācijas failu
Pēc tam izveidojiet Tailwind CSS konfigurācijas failu ' tailwind.config.js ”, lai paplašinātu tās funkcionalitāti, piemēram, norādītu HTML veidnes ceļus, lietotāja definētas klases un daudzas citas, izmantojot šo komandu:

npx tailwindcss init

Izvade parāda, ka norādītais konfigurācijas fails ir izveidots. Tagad apskatiet ' tailwind.config.js ” fails:

3. darbība. Pievienojiet Tailwind direktīvas galvenajam CSS failam
Tagad, lai pievienotu īpašu funkcionalitāti izveidotajam Tailwind projektam, pievienojiet šādas trīs iepriekš esošās tailwind direktīvas galvenajā ' stils.css ” fails:

@tailwind bāze;
@tailwind sastāvdaļas;
@tailwind utilities;

Iepriekš minētajā koda blokā:

bāze : Tas ir pirmais “Tailwind CSS” slānis, kas pēc noklusējuma maina tīmekļa lapas stilu, piemēram, fona krāsu, teksta krāsu vai fontu saimi.
sastāvdaļas : šis otrais slānis ir pieejams “konteinera” klasē, kas pievieno platumu atbilstoši pārlūkprogrammas izmēram. Tās sadaļā lietotājs var pievienot savus izveidotos ārējos komponentus.
komunālie pakalpojumi : tas ir trešais slānis, kas apvieno gandrīz visas stila klases, piemēram, ēnas, krāsas, pievienošanu, flex un daudzas citas klases.

Šīs direktīvas var redzēt šādā logā:

4. darbība: izveidojiet CSS
Tagad izveidojiet CSS, izmantojot Tailwind CLI rīku, izpildot šādu komandu. Tas skenēs visus veidņu failus un izveidos CSS mapē ' dist/output.css ” fails:

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

Var novērot, ka iepriekš minētā komanda ir veiksmīgi izpildīta. Tagad “projekta1” faila struktūra izskatās šādi:

5. darbība. Izveidojiet HTML veidni un konfigurējiet tās ceļu
Izveidojiet HTML veidni, kurā lietotājs vēlas iegult “Tailwind CSS”, un pēc tam konfigurējiet tās ceļu mapē “ tailwind.config.js ”. Vispirms apskatīsim šo HTML veidni ' index.html ”:

< galvu >
< saite href = '/dist/output.css' rel = 'stila lapa' >
< / galvu >
< ķermeni >
< h2 klasē = 'text-center font-bold text-white bg-orange-500' >Laipni lūdzam Linuxhint!< / h2 >< br >
< h3 klasē = 'text-center font-bold text-blue-600 bg-pink-400' >Pirmā apmācība: Tailwind CSS Framework.< / h3 >< br >
< lpp klasē = 'text-center text-green-500' > Tailwind CSS ir labi zināms CSS ietvars, kas palīdz iestatīt iepriekš definētas CSS klases stils jūsu HTML elementi.< / lpp >
< / ķermeni >

Iepriekš minētajās koda rindās:

Sadaļā “galva” tiek izmantots “ ' tagu, lai saistītu izveidoto/kompilēto CSS failu' /dist/output.css ' ar esošo HTML failu ' index.html ”.
Sadaļā “body” vispirms ir norādīts “
' tagu, kas definē pirmo apakšvirsrakstu, izmantojot Tailwind klasi ' Teksta līdzināšana ”, lai pielāgotu tā izlīdzināšanu “centrā”, “ Fonta svars ', lai tekstu 'treknrakstā', ' Teksta krāsa ”, lai pievienotu norādīto krāsu, un Fona krāsa ”, lai attiecīgi lietotu doto fona krāsu.
Tālāk “
” un „
” tagos tiek izmantotas arī iepriekš apspriestās Tailwind klases, lai veidotu savu saturu.

Konfigurējiet HTML veidnes ceļu
Pēc tam atveriet ' tailwind.config.js ” un pievienojiet saites vai ceļu HTML veidnes faila sadaļā “content”, t.i., “index.html”:

saturu : [ './index.html' ]

Nospiediet ' Ctrl+S ”, lai saglabātu jaunās izmaiņas.

6. darbība: izpildiet HTML kodu
Visbeidzot, izpildiet HTML kodu “index.html” tiešraides serverī un skatiet tā izvadi:

Izvade

Kā redzams, izvade parāda veidotu HTML saturu, izmantojot Tailwind CSS.

Secinājums

Tailwind CSS izmanto “ tailwind.config.js ” konfigurācijas failu, lai konfigurētu izveidoto HTML veidņu ceļus. Tas nosaka ' saturu ” sadaļa, kurā ir precīzs visu HTML veidņu ceļš, avota faili, kas satur Tailwind klašu nosaukumus, un JavaScript komponenti. Tas skenē norādīto HTML failu un pēc tam savā saturā ievieš Tailwind CSS. Šī ziņa ilustrē visu procedūru veidņu ceļu konfigurēšanai Tailwind CSS.

Kā konfigurēt veidņu ceļus Tailwind CSS