Ta članek podrobneje opisuje celoten postopek za ustvarjanje prednastavitve v Tailwindu.
Kako ustvariti 'prednastavitev' v Tailwindu?
Hrbtni veter “ Prednastavitve « veljajo za običajne konfiguracijske objekte, ki določajo isto konfiguracijo, kot je podana v konfiguracijski datoteki »tailwind.config.js«. Datoteka »prednastavitev« ni privzeto ustvarjena, vendar jo lahko ustvarite tako, da sledite spodnjim korakom:
1. korak: Ustvarite »prednastavljeno« datoteko
Najprej ustvarite » preset.js ” v projektu Tailwind in dodajte vse želene konfiguracijske možnosti, kot so razširitve, preglasitve tem, dodajanje vtičnikov in še veliko več:
// Primer prednastavitve
modul. izvoz = {
tema : {
barve : {
modra : {
svetloba : '#85d7ff' ,
PRIVZETO : '#1fb6ff' ,
temno : '#009 sedlo' ,
} ,
roza : {
svetloba : '#ff7ce5' ,
PRIVZETO : '#ff49db' ,
temno : '#ff16d1' ,
} ,
siva : {
najtemnejši : '#1f2d3d' ,
temno : '#3c4858' ,
PRIVZETO : 'v #c0cc' ,
svetloba : '#e0e6ed' ,
najlažji : '#f9fafc' ,
}
} ,
fontFamily : {
brez : [ 'grafika' , 'sans serif' ] ,
} ,
Pritisnite “ Ctrl+S ”, da shranite zgornjo datoteko.
2. korak: Uredite datoteko »tailwind.config.js«.
Nato se pomaknite do » tailwind.config.js ' konfiguracijske datoteke, podajte ime poti predloge in določite ' preset.js ' datoteka z ' prednastavitve ” ključna beseda:
modul. izvoz = {
vsebino : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
prednastavitve : [
( 'preset.js' )
]
}
Pritisnite “ Ctrl+S ”, da shranite datoteko.
3. korak: Zaženite aplikacijo
Zdaj zaženite obstoječi ' hitri projekt ” v razvojnem strežniku tako, da vnesete naslednji ukaz:
npm run dev 
Na koncu kliknite povezavo »localhost«, da prikažete izhod.
Izhod
Kot vidimo, izhod vrne projekt vite s slogom »Tailwind CSS«.
Zaključek
V Tailwindu ustvarite » prednastavitev « v projektu in podajte vse konfiguracije » tailwind.config.js ” v njem. Po tem določite datoteko »preset.js« v datoteki »tailwind.config.js« s pomočjo ključne besede »preset«. Novo ustvarjena datoteka »preset.js« bo vdelala ves CSS po meri v podano predlogo, enako kot datoteka »tailwind.config.js«. Ta članek je prikazal celoten postopek za ustvarjanje prednastavitve v Tailwindu.