Questo articolo elabora la procedura completa per creare un preset in Tailwind.
Come creare un 'preset' in Tailwind?
Vento in poppa” Preset ' sono considerati i normali oggetti di configurazione che specificano la stessa configurazione specificata nel file di configurazione 'tailwind.config.js'. Il file 'preset' non viene creato per impostazione predefinita, tuttavia può essere creato seguendo i passaggi indicati di seguito:
Passaggio 1: creare un file 'preimpostato'.
Innanzitutto, crea un ' preset.js ” nel progetto Tailwind e aggiungi tutte le opzioni di configurazione desiderate come estensioni, sovrascritture del tema, aggiunta di plug-in e molto altro:
// Preimpostazione di esempio
modulo. esportazioni = {
tema : {
colori : {
blu : {
leggero : '#85d7ff' ,
PREDEFINITO : '#1fb6ff' ,
buio : '#009 sella' ,
} ,
rosa : {
leggero : '#ff7ce5' ,
PREDEFINITO : '#ff49db' ,
buio : '#ff16d1' ,
} ,
grigio : {
più oscuro : '#1f2d3d' ,
buio : '#3c4858' ,
PREDEFINITO : 'in #c0cc' ,
leggero : '#e0e6ed' ,
più leggero : '#f9fafc' ,
}
} ,
famiglia di font : {
senza : [ 'grafico' , 'sans serif' ] ,
} ,
Premere ' Ctrl+S ” per salvare il file sopra.
Passaggio 2: modifica il file 'tailwind.config.js'.
Successivamente, vai al ' tailwind.config.js ” file di configurazione, specificare il nome dei percorsi del modello e specificare il “ preset.js ” file con il “ preset ' parola chiave:
modulo. esportazioni = {
contenuto : [
'./indice.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
preset : [
( 'preset.js' )
]
}
Premere ' Ctrl+S ” per salvare il file.
Passaggio 3: eseguire l'applicazione
Ora, esegui l'esistente ' progetto veloce ” nel server di sviluppo immettendo il seguente comando:
npm esegue lo sviluppo 
Infine, fai clic sul link 'localhost' per mostrare l'output.
Produzione
Come visto, l'output restituisce un progetto vite con lo stile 'Tailwind CSS'.
Conclusione
In Tailwind, crea un ' preimpostato ” nel progetto e specificare tutte le configurazioni del “ tailwind.config.js ” file in esso. Successivamente, specifica il file 'preset.js' nel file 'tailwind.config.js' con l'aiuto della parola chiave 'preset'. Il file 'preset.js' appena creato incorporerà tutti i CSS personalizzati nel modello specificato come nel file 'tailwind.config.js'. Questo articolo ha illustrato la procedura completa per creare un preset in Tailwind.