Selles artiklis käsitletakse Tailwindis eelseadistuse loomise täielikku protseduuri.
Kuidas luua Tailwindis 'eelseadet'?
taganttuul' Eelseaded ” loetakse tavalisteks konfiguratsiooniobjektideks, mis määravad sama konfiguratsiooni, mis on määratud konfiguratsioonifailis „tailwind.config.js”. Eelseadistatud faili vaikimisi ei looda, kuid selle saab luua, järgides alltoodud samme:
1. samm: looge 'eelseadistatud' fail
Esiteks looge ' preset.js ” faili projekti Tailwind ja lisage kõik soovitud konfiguratsioonisuvandid, nagu laiendused, teemade alistamised, pistikprogrammide lisamine ja palju muud:
// Eelseadistuse näide
moodul. eksporti = {
teema : {
värvid : {
sinine : {
valgus : '#85d7ff' ,
VAIKESÄTE : '#1fb6ff' ,
tume : '#009 sadul' ,
} ,
roosa : {
valgus : '#ff7ce5' ,
VAIKESÄTE : '#ff49db' ,
tume : '#ff16d1' ,
} ,
hall : {
kõige tumedam : '#1f2d3d' ,
tume : '#3c4858' ,
VAIKESÄTE : 'in #c0cc' ,
valgus : '#e0e6ed' ,
kergeim : '#f9fafc' ,
}
} ,
fontFamily : {
ilma : [ 'graafika' , 'sans serif' ] ,
} ,
Vajutage ' Ctrl+S ” ülaltoodud faili salvestamiseks.
2. samm: muutke faili „tailwind.config.js”.
Järgmisena navigeerige jaotisse ' tailwind.config.js ' konfiguratsioonifail, määrake malli teede nimi ja määrake ' preset.js ' faili koos ' eelseadistused ” märksõna:
moodul. eksporti = {
sisu : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
eelseadistused : [
( 'preset.js' )
]
}
Vajutage ' Ctrl+S ” faili salvestamiseks.
3. samm: käivitage rakendus
Nüüd käivitage olemasolev ' kiire projekt ” arendusserveris, sisestades järgmise käsu:
npm käivita dev
Lõpuks klõpsake väljundi kuvamiseks linki „localhost”.
Väljund
Nagu näha, tagastab väljund vite projekti stiiliga 'Tailwind CSS'.
Järeldus
Tailwindis looge ' eelseadistatud ' faili projektis ja määrake kõik faili ' tailwind.config.js ” faili selles. Pärast seda määrake failis 'tailwind.config.js' märksõna 'preset' abil fail 'preset.js'. Äsja loodud fail 'preset.js' manustab kogu kohandatud CSS-i määratud mallile samamoodi nagu fail 'tailwind.config.js'. See artikkel demonstreeris Tailwindis eelseadistuse loomise täielikku protseduuri.