V tomto článku je podrobne o úplnom postupe vytvorenia predvoľby v Tailwinde.
Ako vytvoriť „predvoľbu“ v Tailwinde?
Tailwind “ Predvoľby ” sú považované za bežné konfiguračné objekty, ktoré špecifikujú rovnakú konfiguráciu, ako je špecifikovaná v konfiguračnom súbore “tailwind.config.js”. Súbor „prednastavený“ nie je predvolene vytvorený, dá sa však vytvoriť podľa nižšie uvedených krokov:
Krok 1: Vytvorte súbor „Preset“.
Najprv vytvorte „ preset.js ” v projekte Tailwind a pridajte všetky požadované možnosti konfigurácie, ako sú rozšírenia, prepisy tém, pridávanie doplnkov a oveľa viac:
// Príklad prednastavenia
modul. exportov = {
tému : {
farby : {
Modrá : {
svetlo : '#85d7ff' ,
DEFAULT : '#1fb6ff' ,
tmavé : '#009 sedlo' ,
} ,
Ružová : {
svetlo : '#ff7ce5' ,
DEFAULT : '#ff49db' ,
tmavé : '#ff16d1' ,
} ,
sivá : {
najtemnejšie : '#1f2d3d' ,
tmavé : '#3c4858' ,
DEFAULT : 'in #c0cc' ,
svetlo : '#e0e6ed' ,
najľahší : '#f9fafc' ,
}
} ,
fontFamily : {
bez : [ 'graphic' , 'sans serif' ] ,
} ,
Stlačte ' Ctrl+S ” na uloženie vyššie uvedeného súboru.
Krok 2: Upravte súbor „tailwind.config.js“.
Ďalej prejdite na „ tailwind.config.js konfiguračný súbor, zadajte názov ciest šablóny, ako aj „ preset.js ” súbor s príponou “ predvoľby ” kľúčové slovo:
modul. exportov = {
obsahu : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
predvoľby : [
( 'preset.js' )
]
}
Stlačte ' Ctrl+S ” na uloženie súboru.
Krok 3: Spustite aplikáciu
Teraz spustite existujúci „ rýchly projekt ” na vývojovom serveri zadaním nasledujúceho príkazu:
npm spustiť dev
Nakoniec kliknutím na odkaz „localhost“ zobrazíte výstup.
Výkon
Ako vidíte, výstup vráti projekt vite so štýlom „Tailwind CSS“.
Záver
V Tailwinde vytvorte „ prednastavené “ v projekte a špecifikujte všetky konfigurácie “ tailwind.config.js “. Potom zadajte súbor „preset.js“ v súbore „tailwind.config.js“ pomocou kľúčového slova „preset“. Novovytvorený súbor „preset.js“ vloží všetky vlastné CSS do zadanej šablóny rovnako ako súbor „tailwind.config.js“. Tento článok demonštroval úplný postup vytvorenia predvoľby v Tailwinde.