Ez a cikk a Tailwindben előbeállítások létrehozásának teljes eljárását részletezi.
Hogyan készítsünk „előbeállítást” a Tailwindben?
hátszél' Előbeállítások ” olyan szokásos konfigurációs objektumok, amelyek ugyanazt a konfigurációt adják meg, mint a „tailwind.config.js” konfigurációs fájlban. Az „előre beállított” fájl alapértelmezés szerint nem jön létre, de az alábbi lépések végrehajtásával létrehozható:
1. lépés: Hozzon létre egy „előre beállított” fájlt
Először hozzon létre egy ' preset.js ” fájlt a Tailwind projektben, és adja hozzá az összes kívánt konfigurációs lehetőséget, például a kiterjesztéseket, a téma felülírásait, a bővítmények hozzáadását és még sok mást:
// Példa előre beállított
modult. export = {
téma : {
színek : {
kék : {
fény : '#85d7ff' ,
ALAPÉRTELMEZETT : '#1fb6ff' ,
sötét : '#009 nyereg' ,
} ,
rózsaszín : {
fény : '#ff7ce5' ,
ALAPÉRTELMEZETT : '#ff49db' ,
sötét : '#ff16d1' ,
} ,
szürke : {
legsötétebb : '#1f2d3d' ,
sötét : „#3c4858” ,
ALAPÉRTELMEZETT : 'in #c0cc' ,
fény : '#e0e6ed' ,
legkönnyebb : '#f9fafc' ,
}
} ,
betűtípus család : {
nélkül : [ 'grafikus' , 'sans serif' ] ,
} ,
Nyomja meg ' Ctrl+S ” a fenti fájl mentéséhez.
2. lépés: Szerkessze a „tailwind.config.js” fájlt
Ezután navigáljon a „ tailwind.config.js ” konfigurációs fájlban adja meg a sablon elérési útjait, valamint a „ preset.js ' fájlt a ' előbeállítások ” kulcsszó:
modult. export = {
tartalom : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
előbeállítások : [
( 'preset.js' )
]
}
Nyomja meg ' Ctrl+S ” a fájl mentéséhez.
3. lépés: Futtassa az alkalmazást
Most futtassa a meglévő ' gyors projekt ” a fejlesztői szerveren a következő parancs beírásával:
npm futás dev 
Végül kattintson a „localhost” hivatkozásra a kimenet megjelenítéséhez.
Kimenet
Amint látható, a kimenet egy vite projektet ad vissza „Tailwind CSS” stílussal.
Következtetés
A Tailwindben hozzon létre egy „ előre beállított ” fájlt a projektben, és adja meg a „ tailwind.config.js ” fájlt. Ezután adja meg a „preset.js” fájlt a „tailwind.config.js” fájlban a „preset” kulcsszó segítségével. Az újonnan létrehozott „preset.js” fájl az összes egyéni CSS-t beágyazza a megadott sablonba, ugyanúgy, mint a „tailwind.config.js” fájl. Ez a cikk bemutatta a Tailwind előbeállítások létrehozásának teljes eljárását.