Această postare demonstrează procedura de configurare a căilor de șablon în Tailwind CSS.
Cum se configurează căile șabloanelor în Tailwind CSS?
„ tailwind.config.js ” fișierul de configurare este utilizat pentru a configura căile șablonului în care utilizatorul dorește să încorporeze CSS-ul Tailwind. Nu este prezent implicit, dar poate fi creat în proiect folosind managerul de pachete „npm”.
Această secțiune efectuează câțiva pași esențiali pentru a configura căile șablonului în fișierul „tailwind.config.js”.
Notă : Pentru a implementa „Tailwind CSS”, mai întâi instalați „ Node.js ” aplicație în sistemul dvs. prin link-ul furnizat ” https://nodejs.org/en ” pentru a executa comenzile.
Pasul 1: Instalați „TailwindCSS”
Mai întâi, creați un nou proiect numit „Project1” și deschideți-l în editorul de cod. Acum, deschideți noul terminal și instalați „Tailwind CSS” cu ajutorul următoarei comenzi:
npm install -D tailwindcss
În comanda de mai sus, „ npm ” este managerul de pachete nod care instalează „TailwindCSS”, după cum urmează:
Aici rezultatul arată că „Tailwind CSS” și pachetele sale au fost descărcate cu succes.
Pasul 2: Creați fișierul de configurare Tailwind
Apoi, creați fișierul de configurare CSS Tailwind „ tailwind.config.js ” pentru a-și extinde funcționalitatea, cum ar fi specificarea căilor șablonului HTML, claselor definite de utilizator și multe altele folosind această comandă:
Rezultatul arată că fișierul de configurare specificat a fost creat. Acum, aruncați o privire la „ tailwind.config.js ” fișier:
Pasul 3: Adăugați directivele Tailwind în fișierul CSS principal
Acum, pentru a adăuga funcționalități speciale la proiectul Tailwind creat, adăugați următoarele trei directive preexistente de vânt în spate în principalul „ stil.css ” fișier:
componente @tailwind;
utilități @tailwind;
În blocul de cod de mai sus:
- baza : este primul strat al „Tailwind CSS” care modifică stilul paginii web în mod implicit, cum ar fi culoarea de fundal, culoarea textului sau familia de fonturi.
- componente : Acest al doilea strat este disponibil în interiorul clasei „container” care adaugă lățimea în funcție de dimensiunea browserului. În secțiunea sa, utilizatorul poate adăuga propriile componente externe create.
- utilitati : este al treilea strat care adună aproape toate clasele de stil, cum ar fi umbre, culori, adăugare, flexibilitate și multe alte clase.
Aceste directive pot fi văzute în următoarea fereastră:
Pasul 4: Construiește CSS-ul
Acum, construiți CSS folosind instrumentul CLI Tailwind executând următoarea comandă. Acesta va scana toate fișierele șablon și va construi CSS-ul în „ dist/output.css ” fișier:
Se poate observa că comanda de mai sus este executată cu succes. Acum, structura fișierului „project1” arată astfel:
Pasul 5: Creați un șablon HTML și configurați calea acestuia
Creați șablonul HTML în care utilizatorul dorește să încorporeze „CSS Tailwind” și apoi configurați calea acestuia în „ tailwind.config.js ”. Să aruncăm mai întâi o privire la următorul șablon HTML „ index.html ”:
< legătură href = „/dist/output.css” rel = 'foaia de stil' >
< / cap >
< corp >
< h2 clasă = „font-centr-text-text aldine-alb bg-orange-500” >Bine ați venit la Linuxhint!< / h2 >< br >
< h3 clasă = „font-centr-text-text aldine-albastru-600 bg-roz-400” >Primul tutorial: Tailwind CSS Framework.< / h3 >< br >
< p clasă = „text-center text-green-500” > Tailwind CSS este un cadru CSS bine-cunoscut care ajută la setarea claselor CSS predefinite la stil elementele dvs. HTML.< / p >
< / corp >
În liniile de cod de mai sus:
- Secțiunea „cap” folosește „ „etichetă pentru a lega fișierul CSS creat/compilat” /dist/output.css ” cu fișierul HTML existent ” index.html ”.
- Secțiunea „corp” specifică mai întâi „ ” etichetă care definește primul subtitlu folosind clasa Tailwind ” Aliniere text ” pentru a-și ajusta alinierea la „centru”, „ Grosimea fontului ” pentru a „îngroșa” textul, „ Culoarea textului ” pentru a adăuga culoarea specificată și „ Culoare de fundal ” pentru a aplica culoarea de fundal dată, respectiv.
- În continuare, „ ' si ' Etichetele ” folosesc, de asemenea, clasele Tailwind discutate mai sus pentru a-și stila conținutul.
Configurați calea șablonului HTML
Apoi, deschideți „ tailwind.config.js ” și adăugați linkurile sau calea în secțiunea „conținut” a fișierului șablon HTML, adică „index.html”:
Presa ' Ctrl+S ” pentru a salva noile modificări.
Pasul 6: Executați codul HTML
În cele din urmă, executați codul HTML „index.html” în serverul live și vedeți rezultatul acestuia:
Ieșire
După cum s-a văzut, rezultatul arată conținutul HTML stilat cu ajutorul CSS Tailwind.
Concluzie
Tailwind CSS folosește „ tailwind.config.js ” fișier de configurare pentru a configura căile de șablon HTML create. Acesta specifică „ conţinut ” care include calea exactă a tuturor șabloanelor HTML, fișierele sursă care conțin nume de clasă Tailwind și componentele JavaScript. Scanează fișierul HTML specificat și apoi implementează Tailwind CSS în conținutul său. Această postare a ilustrat procedura completă de configurare a căilor de șablon în Tailwind CSS.