Ako vytvoriť predvoľbu v Tailwinde

Ako Vytvorit Predvolbu V Tailwinde



Tailwind CSS ” vykoná všetky svoje vlastné konfigurácie v súbore „tailwind.config.js“, ktorý sa automaticky zlúči s predvolenou konfiguráciou. V takých prípadoch, ' Predvoľby Tailwind ” pomáha používateľom samostatne zostavovať svoje vlastné konfigurácie. „Predvoľby Tailwind“ sú v podstate používateľsky opakovane použiteľná konfigurácia, ktorá špecifikuje samostatnú konfiguráciu, ktorú možno použiť ako základ. Poskytuje najjednoduchší spôsob, ako vytvoriť prispôsobenie, ktoré chce používateľ opätovne použiť vo viacerých projektoch. Pomáha používateľom úplne nahradiť predvolenú konfiguráciu Tailwind.

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.