Kuidas Tailwindis eelseadistust luua

Kuidas Tailwindis Eelseadistust Luua



Tailtuule CSS ” teostab kõik oma kohandatud konfiguratsioonid failis „tailwind.config.js”, mis liidetakse automaatselt vaikekonfiguratsiooniga. Sellistel juhtudel, ' Tailtuule eelseaded ” aitab kasutajatel luua oma konfiguratsioonid eraldi. Tailwind Presets on põhimõtteliselt kasutaja korduvkasutatav konfiguratsioon, mis määrab eraldi konfiguratsiooni, mida saab kasutada alusena. See on lihtsaim viis kohandamise loomiseks, mida kasutaja soovib mitmes projektis uuesti kasutada. See aitab kasutajatel täielikult asendada Tailwindi vaikekonfiguratsiooni.

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.