Dit artikel gaat dieper in op de volledige procedure om een preset te maken in Tailwind.
Hoe maak je een 'Preset' aan in Tailwind?
Wind in de rug “ Voorinstellingen ' worden beschouwd als de normale configuratieobjecten die dezelfde configuratie specificeren als gespecificeerd in het configuratiebestand 'tailwind.config.js'. Het 'preset' -bestand wordt niet standaard gemaakt, maar kan worden gemaakt door de onderstaande stappen te volgen:
Stap 1: maak een 'Preset' -bestand aan
Maak eerst een ' preset.js ”-bestand in het Tailwind-project en voeg alle gewenste configuratie-opties toe, zoals extensies, thema-overrides, het toevoegen van plug-ins en nog veel meer:
// Voorbeeld voorinstelling
moduul. export = {
thema : {
kleuren : {
blauw : {
licht : '#85d7ff' ,
STANDAARD : '#1fb6ff' ,
donker : '#009 zadel' ,
} ,
roze : {
licht : '#ff7ce5' ,
STANDAARD : '#ff49db' ,
donker : '#ff16d1' ,
} ,
grijs : {
donkerste : '#1f2d3d' ,
donker : '#3c4858' ,
STANDAARD : 'in #c0cc' ,
licht : '#e0e6ed' ,
lichtste : '#f9fafc' ,
}
} ,
lettertypeFamilie : {
zonder : [ 'grafisch' , 'sans serif' ] ,
} ,
Druk op ' Ctrl+S ” om het bovenstaande bestand op te slaan.
Stap 2: Bewerk het bestand 'tailwind.config.js'.
Navigeer vervolgens naar de “ staartwind.config.js ' configuratiebestand, geeft u de naam van de sjabloonpaden op en geeft u de ' preset.js ' bestand met de ' voorinstellingen ” trefwoord:
moduul. export = {
inhoud : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
voorinstellingen : [
( 'preset.js' )
]
}
Druk op ' Ctrl+S ” om het bestand op te slaan.
Stap 3: voer de toepassing uit
Voer nu de bestaande ' snel project ” in de ontwikkelingsserver door de volgende opdracht in te voeren:
npm run dev 
Klik ten slotte op de link 'localhost' om de uitvoer weer te geven.
Uitgang
Zoals te zien is, retourneert de uitvoer een vite-project met 'Tailwind CSS' -stijl.
Conclusie
Maak in Tailwind een ' vooraf ingesteld ” bestand in het project en specificeer alle configuraties van de “ staartwind.config.js '-bestand erin. Specificeer daarna het bestand 'preset.js' in het bestand 'tailwind.config.js' met behulp van het trefwoord 'preset'. Het nieuw gemaakte bestand 'preset.js' zal alle aangepaste CSS in de opgegeven sjabloon insluiten, net als het bestand 'tailwind.config.js'. Dit artikel demonstreerde de volledige procedure voor het maken van een preset in Tailwind.