Šiame straipsnyje išsamiai aprašoma visa išankstinio nustatymo „Tailwind“ kūrimo procedūra.
Kaip sukurti išankstinį nustatymą „Tailwind“?
Galinis vėjas“ Išankstiniai nustatymai “ yra laikomi įprastais konfigūracijos objektais, kurie nurodo tą pačią konfigūraciją, kaip nurodyta „tailwind.config.js“ konfigūracijos faile. „Iš anksto nustatytas“ failas nėra sukurtas pagal numatytuosius nustatymus, tačiau jį galima sukurti atlikus toliau nurodytus veiksmus:
1 veiksmas: sukurkite „iš anksto nustatytą“ failą
Pirmiausia sukurkite „ preset.js ” failą „Tailwind“ projekte ir pridėkite visas norimas konfigūracijos parinktis, tokias kaip plėtiniai, temos nepaisymas, papildinių pridėjimas ir daug daugiau:
// Išankstinio nustatymo pavyzdys
modulis. eksportas = {
tema : {
spalvos : {
mėlyna : {
šviesa : „#85d7ff“ ,
NUMATYTAS : „#1fb6ff“ ,
tamsus : „#009 balnas“ ,
} ,
rožinis : {
šviesa : „#ff7ce5“ ,
NUMATYTAS : „#ff49db“ ,
tamsus : „#ff16d1“ ,
} ,
pilka : {
tamsiausias : „#1f2d3d“ ,
tamsus : „#3c4858“ ,
NUMATYTAS : „#c0cc“ ,
šviesa : „#e0e6ed“ ,
lengviausias : „#f9fafc“ ,
}
} ,
šrifto šeima : {
be : [ 'grafinis' , 'sans serif' ] ,
} ,
Paspauskite ' Ctrl + S “, kad išsaugotumėte aukščiau esantį failą.
2 veiksmas: redaguokite failą „tailwind.config.js“.
Tada eikite į „ tailwind.config.js “ konfigūracijos failą, nurodykite šablono kelių pavadinimą ir nurodykite „ preset.js “ failą su „ išankstiniai nustatymai “ raktinis žodis:
modulis. eksportas = {
turinys : [
'./index.html' ,
„./src/**/*.{js,ts,jsx,tsx}“ ,
] ,
išankstiniai nustatymai : [
( 'preset.js' )
]
}
Paspauskite ' Ctrl + S “, kad išsaugotumėte failą.
3 veiksmas: paleiskite programą
Dabar paleiskite esamą ' greitas projektas “ kūrimo serveryje įvesdami šią komandą:
npm paleisti dev 
Galiausiai spustelėkite nuorodą „localhost“, kad parodytumėte išvestį.
Išvestis
Kaip matyti, išvestis grąžina vite projektą su „Tailwind CSS“ stiliumi.
Išvada
„Tailwind“ sukurkite „ iš anksto nustatytas “ failą projekte ir nurodykite visas „“ konfigūracijas tailwind.config.js “ failą jame. Po to nurodykite failą „preset.js“ „tailwind.config.js“ faile naudodami raktinį žodį „preset“. Naujai sukurtas „preset.js“ failas įterps visą tinkintą CSS į nurodytą šabloną taip pat, kaip „tailwind.config.js“ faile. Šiame straipsnyje parodyta visa procedūra, kaip sukurti išankstinį nustatymą „Tailwind“.