Ovaj članak razrađuje cijeli postupak za stvaranje unaprijed postavljenih postavki u Tailwindu.
Kako stvoriti 'Preset' u Tailwindu?
Leđni vjetar “ Unaprijed postavljene postavke ” smatraju se uobičajenim konfiguracijskim objektima koji specificiraju istu konfiguraciju kao što je navedena u konfiguracijskoj datoteci “tailwind.config.js”. Datoteka 'unaprijed postavljena' nije stvorena prema zadanim postavkama, no može se stvoriti slijedeći dolje navedene korake:
Korak 1: Stvorite 'Preset' datoteku
Prvo stvorite ' unaprijed postavljeno.js ” u projektu Tailwind i dodajte sve željene opcije konfiguracije kao što su proširenja, nadjačavanja tema, dodavanje dodataka i još mnogo toga:
// Primjer unaprijed postavljenih postavki
modul. izvozi = {
tema : {
boje : {
plava : {
svjetlo : '#85d7ff' ,
ZADANO : '#1fb6ff' ,
mračno : '#009 sedlo' ,
} ,
ružičasta : {
svjetlo : '#ff7ce5' ,
ZADANO : '#ff49db' ,
mračno : '#ff16d1' ,
} ,
siva : {
najtamniji : '#1f2d3d' ,
mračno : '#3c4858' ,
ZADANO : 'u #c0cc' ,
svjetlo : '#e0e6ed' ,
najlakši : '#f9fafc' ,
}
} ,
fontFamily : {
bez : [ 'grafički' , 'sans serif' ] ,
} ,
Pritisnite “ Ctrl+S ” za spremanje gornje datoteke.
Korak 2: Uredite datoteku 'tailwind.config.js'.
Zatim idite na ' tailwind.config.js ' konfiguracijsku datoteku, navedite naziv staza predloška kao i navedite ' unaprijed postavljeno.js ' datoteka s ' unaprijed postavljene postavke ” ključna riječ:
modul. izvozi = {
sadržaj : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
unaprijed postavljene postavke : [
( 'preset.js' )
]
}
Pritisnite “ Ctrl+S ” za spremanje datoteke.
Korak 3: Pokrenite aplikaciju
Sada pokrenite postojeći ' brzi projekt ” u razvojnom poslužitelju unosom sljedeće naredbe:
npm run dev 
Na kraju, kliknite vezu 'localhost' za prikaz rezultata.
Izlaz
Kao što se vidi, izlaz vraća vite projekt sa stilom 'Tailwind CSS'.
Zaključak
U Tailwindu stvorite ' unaprijed postavljeno ' u projektu i navedite sve konfiguracije ' tailwind.config.js ” datoteku u njemu. Nakon toga odredite datoteku “preset.js” u datoteci “tailwind.config.js” uz pomoć ključne riječi “preset”. Novostvorena datoteka 'preset.js' ugradit će sav prilagođeni CSS na navedeni predložak isto kao i datoteka 'tailwind.config.js'. Ovaj članak demonstrira cijeli postupak za stvaranje unaprijed postavljenih postavki u Tailwindu.