Tässä artikkelissa käsitellään täydellistä toimenpidettä esiasetuksen luomiseksi Tailwindissä.
Kuinka luoda 'esiasetus' Tailwindissä?
myötätuuli' Esiasetukset ' katsotaan tavallisiksi määritysobjekteiksi, jotka määrittävät saman kokoonpanon kuin 'tailwind.config.js' -määritystiedostossa. 'Esiasetus' -tiedostoa ei luoda oletuksena, mutta se voidaan luoda noudattamalla alla annettuja ohjeita:
Vaihe 1: Luo 'esiasetus' -tiedosto
Luo ensin ' preset.js ”-tiedosto Tailwind-projektiin ja lisää kaikki halutut konfigurointivaihtoehdot, kuten laajennukset, teeman ohitukset, laajennusten lisääminen ja paljon muuta:
// Esiasetusesimerkki
moduuli. vientiä = {
teema : {
värit : {
sininen : {
valoa : '#85d7ff' ,
OLETUS : '#1fb6ff' ,
tumma : '#009 satula' ,
} ,
vaaleanpunainen : {
valoa : '#ff7ce5' ,
OLETUS : '#ff49db' ,
tumma : '#ff16d1' ,
} ,
harmaa : {
pimein : '#1f2d3d' ,
tumma : '#3c4858' ,
OLETUS : 'in #c0cc' ,
valoa : '#e0e6ed' ,
kevyin : '#f9fafc' ,
}
} ,
fontFamily : {
ilman : [ 'graafinen' , 'sans serif' ] ,
} ,
Lehdistö ' Ctrl+S ' tallentaaksesi yllä olevan tiedoston.
Vaihe 2: Muokkaa 'tailwind.config.js' -tiedostoa
Siirry seuraavaksi kohtaan ' tailwind.config.js ' määritystiedosto, määritä mallin polkujen nimi sekä ' preset.js ' tiedosto ' esiasetukset 'avainsana:
moduuli. vientiä = {
sisältö : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
esiasetukset : [
( 'preset.js' )
]
}
Lehdistö ' Ctrl+S ' tallentaaksesi tiedoston.
Vaihe 3: Suorita sovellus
Suorita nyt olemassa oleva ' nopea projekti ' kehityspalvelimessa antamalla seuraava komento:
npm run dev 
Napsauta lopuksi 'localhost' -linkkiä näyttääksesi tulosteen.
Lähtö
Kuten näkyy, tulos palauttaa vite-projektin 'Tailwind CSS' -tyylillä.
Johtopäätös
Luo Tailwindissä ' esiasetettu ' -tiedosto projektissa ja määritä kaikki ' tailwind.config.js ”tiedosto siihen. Määritä sen jälkeen 'preset.js'-tiedosto 'tailwind.config.js'-tiedostoon 'preset'-avainsanan avulla. Äskettäin luotu 'preset.js'-tiedosto upottaa kaikki mukautetut CSS-tiedostot määritettyyn malliin samalla tavalla kuin 'tailwind.config.js'-tiedosto. Tämä artikkeli esitteli täydellisen menettelyn esiasetuksen luomiseksi Tailwindissä.