Hvordan konfigurere malbaner i Tailwind CSS

' Medvind CSS ” er et velrenommert allsidig CSS-rammeverk som stiler HTML-innholdet ved hjelp av innebygde og tilpassede CSS-klasser. Det er også nyttig å tilpasse den angitte malen i henhold til brukerkrav. Hele prosessen krever konfigurasjon av malene der brukeren skal bruke Tailwind CSS. Tailwind CSS kan ikke brukes hvis brukeren ikke konfigurerer malbanen. Så konfigurasjonen av malbanene er en forutsetning og obligatorisk.

Dette innlegget demonstrerer prosedyren for å konfigurere malbanene i Tailwind CSS.

Hvordan konfigurere malbaner i Tailwind CSS?

« tailwind.config.js ” konfigurasjonsfilen brukes til å konfigurere malbanene der brukeren ønsker å bygge inn Tailwind CSS. Den er ikke til stede som standard, men den kan opprettes i prosjektet ved å bruke 'npm'-pakkebehandlingen.

Denne delen utfører noen viktige trinn for å konfigurere malbanene i filen 'tailwind.config.js'.

Merk : For å implementere 'Tailwind CSS', installer først ' Node.js 'applikasjon i systemet ditt via den angitte lenken ' https://nodejs.org/en ' for å utføre kommandoene.

Trinn 1: Installer 'TailwindCSS'
Først oppretter du et nytt prosjekt kalt 'Project1' og åpner det i kodeeditoren. Åpne nå den nye terminalen og installer 'Tailwind CSS' ved hjelp av følgende kommando:

npm install -D tailwindcss

I kommandoen ovenfor, ' npm ” er nodepakkebehandleren som installerer “TailwindCSS”, som følger:

Her viser utdataene at 'Tailwind CSS' og pakkene er lastet ned.

Trinn 2: Lag Tailwind-konfigurasjonsfilen
Deretter oppretter du Tailwind CSS-konfigurasjonsfilen ' tailwind.config.js ' for å utvide funksjonaliteten som å spesifisere HTML-malbanene, brukerdefinerte klasser og mange andre ved å bruke denne kommandoen:

npx medvindcss init

Utdataene viser at den angitte konfigurasjonsfilen er opprettet. Ta nå en titt på ' tailwind.config.js ' fil:

Trinn 3: Legg til medvindsdirektivene til hoved-CSS-filen
Nå, for å legge til spesiell funksjonalitet til det opprettede Tailwind-prosjektet, legg til følgende tre forhåndseksisterende medvindsdirektiver i hovedsiden ' style.css ' fil:

@medvind base;
@tailwind komponenter;
@tailwind-verktøy;

I kodeblokken ovenfor:

utgangspunkt : Det er det første laget av 'Tailwind CSS' som endrer nettsidens stil som standard som bakgrunnsfarge, tekstfarge eller skriftfamilie.
komponenter : Dette andre laget er tilgjengelig i 'container'-klassen som legger til bredden i henhold til nettleserstørrelsen. I sin seksjon kan brukeren legge til sine egne opprettede eksterne komponenter.
verktøy : Det er det tredje laget som legger sammen nesten alle stylingklassene som skygger, farger, adding, flex og mange andre klasser.

Disse direktivene kan sees i følgende vindu:

Trinn 4: Bygg CSS
Bygg nå CSS ved å bruke Tailwind CLI-verktøyet ved å utføre følgende kommando. Den vil skanne alle malfilene og bygge opp CSS i ' dist/output.css ' fil:

npx medvindcss -i . / stil .css -o . / dist / output.css --watch

Det kan observeres at kommandoen ovenfor utføres vellykket. Nå ser filstrukturen til 'project1' slik ut:

Trinn 5: Lag en HTML-mal og konfigurer banen
Lag HTML-malen som brukeren vil legge inn 'Tailwind CSS' i og konfigurer deretter banen i ' tailwind.config.js '. La oss først ta en titt på følgende HTML-mal ' index.html ':

< hode >
< link href = '/dist/output.css' rel = 'stilark' >
< / hode >
< kropp >
< h2 klasse = 'tekst-senter font-fet tekst-hvit bg-oransje-500' >Velkommen til Linuxhint!< / h2 >< br >
< h3 klasse = 'text-center font-bold text-blue-600 bg-pink-400' >Første veiledning: Tailwind CSS Framework.< / h3 >< br >
< s klasse = 'tekstsenter tekst-grønn-500' >Tailwind CSS er et velkjent CSS-rammeverk som hjelper til med å sette de forhåndsdefinerte CSS-klassene til stil HTML-elementene dine.< / s >
< / kropp >

I kodelinjene ovenfor:

'Hode'-delen bruker ' ' tag for å koble den opprettede/kompilerte CSS-filen ' /dist/output.css ' med den eksisterende HTML-filen ' index.html '.
'body'-delen spesifiserer først '
'-taggen som definerer den første underoverskriften ved å bruke Tailwind-klassen ' Tekstjustering ' for å justere justeringen ved 'senter', ' Skriftvekt ' for å 'fet' teksten, ' Tekstfarge ' for å legge til den angitte fargen, og ' Bakgrunnsfarge ” for å bruke henholdsvis den gitte bakgrunnsfargen.
Deretter '
' og '
”-tagger bruker også de ovenfor diskuterte Tailwind-klassene for å style innholdet.

Konfigurer HTML-malbane
Deretter åpner du ' tailwind.config.js ' og legg til koblingene eller banen i 'innhold'-delen av HTML-malfilen, dvs. 'index.html':

innhold : [ './index.html' ]

Trykk ' Ctrl+S ' for å lagre de nye endringene.

Trinn 6: Kjør HTML-koden
Til slutt, kjør HTML-koden 'index.html' i live-serveren og se utdata:

Produksjon

Som sett viser utgangen det stiliserte HTML-innholdet ved hjelp av Tailwind CSS.

Konklusjon

Tailwind CSS bruker ' tailwind.config.js ” konfigurasjonsfil for å konfigurere de opprettede HTML-malbanene. Den spesifiserer ' innhold ”-delen som inkluderer den nøyaktige banen til alle HTML-maler, kildefiler som inneholder Tailwind-klassenavn og JavaScript-komponentene. Den skanner den angitte HTML-filen og implementerer deretter Tailwind CSS i innholdet. Dette innlegget illustrerte hele prosedyren for å konfigurere malbaner i Tailwind CSS.

Hvordan konfigurere malbaner i Tailwind CSS