Denne artikel uddyber den komplette procedure for at oprette en forudindstilling i Tailwind.
Hvordan opretter man en 'Preset' i Tailwind?
medvind' Forudindstillinger ' betragtes som de almindelige konfigurationsobjekter, der specificerer den samme konfiguration som angivet i 'tailwind.config.js' konfigurationsfilen. Den 'forudindstillede' fil oprettes ikke som standard, men den kan oprettes ved at følge nedenstående trin:
Trin 1: Opret en 'Forudindstillet' fil
Først skal du oprette en ' preset.js ” fil i Tailwind-projektet og tilføj alle de ønskede konfigurationsmuligheder såsom udvidelser, tematilsidesættelser, tilføjelse af plugins og meget mere:
// Eksempel forudindstillet
modul. eksport = {
tema : {
farver : {
blå : {
lys : '#85d7ff' ,
STANDARD : '#1fb6ff' ,
mørk : '#009 sadel' ,
} ,
lyserød : {
lys : '#ff7ce5' ,
STANDARD : '#ff49db' ,
mørk : '#ff16d1' ,
} ,
grå : {
mørkeste : '#1f2d3d' ,
mørk : '#3c4858' ,
STANDARD : 'i #c0cc' ,
lys : '#e0e6ed' ,
letteste : '#f9fafc' ,
}
} ,
fontFamily : {
uden : [ 'grafik' , 'sans serif' ] ,
} ,
Tryk på ' Ctrl+S ” for at gemme ovenstående fil.
Trin 2: Rediger 'tailwind.config.js'-filen
Derefter skal du navigere til ' tailwind.config.js ' konfigurationsfil, angiv navnet på skabelonstierne samt angiv ' preset.js ' fil med ' forudindstillinger ' søgeord:
modul. eksport = {
indhold : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
forudindstillinger : [
( 'preset.js' )
]
}
Tryk på ' Ctrl+S ” for at gemme filen.
Trin 3: Kør applikationen
Kør nu den eksisterende ' hurtigt-projekt ” i udviklingsserveren ved at indtaste følgende kommando:
npm køre dev 
Til sidst skal du klikke på linket 'localhost' for at vise outputtet.
Produktion
Som det ses, returnerer outputtet et vite-projekt med 'Tailwind CSS'-styling.
Konklusion
I Tailwind skal du oprette en ' forudindstillet '-filen i projektet og angiv alle konfigurationerne af ' tailwind.config.js ” fil i den. Derefter skal du angive filen 'preset.js' i filen 'tailwind.config.js' ved hjælp af nøgleordet 'preset'. Den nyoprettede 'preset.js'-fil vil indlejre al den brugerdefinerede CSS på den angivne skabelon på samme måde som filen 'tailwind.config.js'. Denne artikel demonstrerede den komplette procedure for at oprette en forudindstilling i Tailwind.