Denne artikkelen utdyper hele prosedyren for å lage en forhåndsinnstilling i Tailwind.
Hvordan lage en 'Forhåndsinnstilling' i Tailwind?
medvind ' Forhåndsinnstillinger ” anses som de vanlige konfigurasjonsobjektene som spesifiserer den samme konfigurasjonen som spesifisert i “tailwind.config.js” konfigurasjonsfilen. 'Forhåndsinnstilt'-filen er ikke opprettet som standard, men den kan opprettes ved å følge trinnene nedenfor:
Trinn 1: Lag en 'Forhåndsinnstilt' fil
Først lager du en ' preset.js ”-filen i Tailwind-prosjektet og legg til alle ønskede konfigurasjonsalternativer som utvidelser, temaoverstyringer, legge til plugins og mye mer:
// Eksempel forhåndsinnstilling
modul. eksport = {
tema : {
farger : {
blå : {
lys : '#85d7ff' ,
MISLIGHOLDE : '#1fb6ff' ,
mørk : '#009 sal' ,
} ,
rosa : {
lys : '#ff7ce5' ,
MISLIGHOLDE : '#ff49db' ,
mørk : '#ff16d1' ,
} ,
grå : {
mørkest : '#1f2d3d' ,
mørk : '#3c4858' ,
MISLIGHOLDE : «i #c0cc» ,
lys : '#e0e6ed' ,
lettest : '#f9fafc' ,
}
} ,
fontFamily : {
uten : [ 'grafikk' , 'sans serif' ] ,
} ,
Trykk ' Ctrl+S ' for å lagre filen ovenfor.
Trinn 2: Rediger 'tailwind.config.js'-filen
Deretter navigerer du til ' tailwind.config.js ' konfigurasjonsfil, spesifiser navnet på malbanene samt spesifiser ' preset.js ' fil med ' forhåndsinnstillinger ' nøkkelord:
modul. eksport = {
innhold : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
forhåndsinnstillinger : [
( 'preset.js' )
]
}
Trykk ' Ctrl+S ' for å lagre filen.
Trinn 3: Kjør applikasjonen
Kjør nå den eksisterende ' raskt prosjekt ' i utviklingsserveren ved å skrive inn følgende kommando:
npm kjøre dev 
Til slutt klikker du på koblingen 'localhost' for å vise utdataene.
Produksjon
Som sett returnerer utgangen et vite-prosjekt med 'Tailwind CSS'-styling.
Konklusjon
I Tailwind oppretter du en ' forhåndsinnstilt '-filen i prosjektet og spesifiser alle konfigurasjonene til ' tailwind.config.js '-filen i den. Etter det, spesifiser 'preset.js'-filen i 'tailwind.config.js'-filen ved hjelp av 'preset' nøkkelordet. Den nyopprettede 'preset.js'-filen vil bygge inn all tilpasset CSS på den angitte malen på samme måte som 'tailwind.config.js'-filen. Denne artikkelen demonstrerte hele prosedyren for å lage en forhåndsinnstilling i Tailwind.