Aquest article explica el procediment complet per crear un valor predefinit a Tailwind.
Com crear un 'Preset' a Tailwind?
Vent de cua ' Presets ” es consideren els objectes de configuració habituals que especifiquen la mateixa configuració que s'especifica al fitxer de configuració “tailwind.config.js”. El fitxer 'preestablert' no es crea per defecte, però es pot crear seguint els passos que s'indiquen a continuació:
Pas 1: creeu un fitxer 'preestablert'.
Primer, creeu un ' preset.js ” al projecte Tailwind i afegiu totes les opcions de configuració desitjades, com ara extensions, substitucions de temes, afegir connectors i molt més:
// Exemple preestablert
mòdul. exportacions = {
tema : {
colors : {
blau : {
llum : '#85d7ff' ,
PER Defecte : '#1fb6ff' ,
fosc : '#009 cadira' ,
} ,
rosa : {
llum : '#ff7ce5' ,
PER Defecte : '#ff49db' ,
fosc : '#ff16d1' ,
} ,
gris : {
més fosc : '#1f2d3d' ,
fosc : '#3c4858' ,
PER Defecte : 'a #c0cc' ,
llum : '#e0e6ed' ,
més lleuger : '#f9fafc' ,
}
} ,
fontFamily : {
sense : [ 'gràfic' , 'sense serif' ] ,
} ,
Premeu ' Ctrl+S ” per desar el fitxer anterior.
Pas 2: Editeu el fitxer 'tailwind.config.js'.
A continuació, navegueu a ' tailwind.config.js ', especifiqueu el nom dels camins de la plantilla i especifiqueu el ' preset.js ' amb el fitxer ' presets ” paraula clau:
mòdul. exportacions = {
contingut : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
presets : [
( 'preset.js' )
]
}
Premeu ' Ctrl+S ” per desar el fitxer.
Pas 3: executeu l'aplicació
Ara, executeu l'existent ' projecte ràpid ” al servidor de desenvolupament introduint l'ordre següent:
npm run dev 
Finalment, feu clic a l'enllaç 'localhost' per mostrar la sortida.
Sortida
Com s'ha vist, la sortida retorna un projecte vite amb l'estil 'Tailwind CSS'.
Conclusió
A Tailwind, creeu un ' preestablert ” al projecte i especifiqueu totes les configuracions del “ tailwind.config.js ” fitxer en ell. Després d'això, especifiqueu el fitxer 'preset.js' al fitxer 'tailwind.config.js' amb l'ajuda de la paraula clau 'preset'. El fitxer 'preset.js' creat recentment incorporarà tot el CSS personalitzat a la plantilla especificada igual que el fitxer 'tailwind.config.js'. Aquest article mostra el procediment complet per crear un valor predefinit a Tailwind.