Dette indlæg demonstrerer proceduren til at konfigurere skabelonstierne i Tailwind CSS.
Hvordan konfigureres skabelonstier i Tailwind CSS?
Det ' tailwind.config.js ” konfigurationsfil bruges til at konfigurere skabelonstierne, hvori brugeren ønsker at indlejre Tailwind CSS. Det er ikke til stede som standard, men det kan oprettes i projektet ved hjælp af 'npm'-pakkehåndteringen.
Dette afsnit udfører nogle væsentlige trin for at konfigurere skabelonstierne i filen 'tailwind.config.js'.
Bemærk : For at implementere 'Tailwind CSS' skal du først installere ' Node.js ' applikation i dit system via det medfølgende link ' https://nodejs.org/en ” for at udføre kommandoerne.
Trin 1: Installer 'TailwindCSS'
Først skal du oprette et nyt projekt med navnet 'Project1' og åbne det i kodeeditoren. Åbn nu den nye terminal og installer 'Tailwind CSS' ved hjælp af følgende kommando:
npm install -D medvindcss
I ovenstående kommando, ' npm ” er node-pakkehåndteringen, der installerer “TailwindCSS”, som følger:
Her viser outputtet, at 'Tailwind CSS' og dens pakker er blevet downloadet.
Trin 2: Opret Tailwind-konfigurationsfilen
Opret derefter Tailwind CSS-konfigurationsfilen ' tailwind.config.js ” for at udvide dens funktionalitet, såsom at angive HTML-skabelonstierne, brugerdefinerede klasser og mange andre ved hjælp af denne kommando:
Outputtet viser, at den angivne konfigurationsfil er blevet oprettet. Tag nu et kig på ' tailwind.config.js ' fil:
Trin 3: Føj medvindsdirektiverne til hoved-CSS-filen
Nu, for at tilføje speciel funktionalitet til det oprettede Tailwind-projekt, skal du tilføje følgende tre allerede eksisterende medvindsdirektiver i hovedmenuen ' style.css ' fil:
@tailwind komponenter;
@tailwind hjælpeprogrammer;
I ovenstående kodeblok:
- grundlag : Det er det første lag af 'Tailwind CSS', der som standard ændrer websidens stil som baggrundsfarve, tekstfarve eller skrifttypefamilie.
- komponenter : Dette andet lag er tilgængeligt i 'container'-klassen, der tilføjer bredden i henhold til browserstørrelsen. I dens sektion kan brugeren tilføje deres egne oprettede eksterne komponenter.
- forsyningsselskaber : Det er det tredje lag, der lægger op til næsten alle stylingklasser såsom skygger, farver, tilføjelse, flex og mange andre klasser.
Disse direktiver kan ses i følgende vindue:
Trin 4: Byg CSS'en
Byg nu CSS'en ved hjælp af Tailwind CLI-værktøjet ved at udføre følgende kommando. Det scanner alle skabelonfilerne og opbygger CSS'en i ' dist/output.css ' fil:
Det kan ses, at ovenstående kommando udføres med succes. Nu ser filstrukturen af 'project1' sådan ud:
Trin 5: Opret en HTML-skabelon og konfigurer dens sti
Opret HTML-skabelonen, som brugeren ønsker at indlejre 'Tailwind CSS' i, og konfigurer derefter dens sti i ' tailwind.config.js ”. Lad os først se på følgende HTML-skabelon ' index.html ”:
< link href = '/dist/output.css' rel = 'stylesheet' >
< / hoved >
< legeme >
< h2 klasse = 'tekst-center skrifttype-fed tekst-hvid bg-orange-500' >Velkommen til Linuxhint!< / h2 >< br >
< h3 klasse = 'text-center font-fed text-blue-600 bg-pink-400' >Første selvstudie: Tailwind CSS Framework.< / h3 >< br >
< s klasse = 'tekstcenter tekst-grøn-500' >Tailwind CSS er en velkendt CSS-ramme, der hjælper med at indstille de foruddefinerede CSS-klasser til stil dine HTML-elementer.< / s >
< / legeme >
I ovenstående kodelinjer:
- Sektionen 'hoved' bruger ' ' tag for at linke den oprettede/kompilerede CSS-fil ' /dist/output.css ' med den eksisterende HTML-fil ' index.html ”.
- Afsnittet 'body' specificerer først ' ' tag, der definerer den første underoverskrift ved hjælp af Tailwind-klassen ' Tekstjustering ' for at justere dens justering ved 'center', ' Skrifttypevægt ' for at 'fed' teksten, ' Tekst farve ' for at tilføje den angivne farve, og ' Baggrundsfarve ” for at anvende henholdsvis den givne baggrundsfarve.
- Dernæst ' ' og ' ”-tags bruger også de ovenfor diskuterede Tailwind-klasser til at style deres indhold.
Konfigurer HTML-skabelonsti
Åbn derefter ' tailwind.config.js ' og tilføj links eller stien i afsnittet 'indhold' i HTML-skabelonfilen, dvs. 'index.html':
Tryk på ' Ctrl+S ” for at gemme de nye ændringer.
Trin 6: Udfør HTML-koden
Til sidst skal du udføre HTML-koden 'index.html' på live-serveren og se dens output:
Produktion
Som det ses, viser outputtet det stylede HTML-indhold ved hjælp af Tailwind CSS.
Konklusion
Tailwind CSS bruger ' tailwind.config.js ” konfigurationsfil for at konfigurere de oprettede HTML-skabelonstier. Det specificerer ' indhold ” sektion, som inkluderer den nøjagtige sti til alle HTML-skabeloner, kildefiler, der indeholder Tailwind-klassenavne og JavaScript-komponenterne. Den scanner den angivne HTML-fil og implementerer derefter Tailwind CSS i dens indhold. Dette indlæg illustrerede den komplette procedure til at konfigurere skabelonstier i Tailwind CSS.