Cet article détaille la procédure complète pour créer un préréglage dans Tailwind.
Comment créer un 'préréglage' dans Tailwind ?
Vent de dos ' Préconfigurations ' sont considérés comme les objets de configuration réguliers qui spécifient la même configuration que celle spécifiée dans le fichier de configuration 'tailwind.config.js'. Le fichier « preset » n'est pas créé par défaut, mais il peut être créé en suivant les étapes ci-dessous :
Étape 1 : créer un fichier « prédéfini »
Tout d'abord, créez un ' preset.js ' dans le projet Tailwind et ajoutez toutes les options de configuration souhaitées telles que les extensions, les remplacements de thème, l'ajout de plugins, et bien plus :
// Exemple de préréglage
module. exportations = {
thème : {
couleurs : {
bleu : {
lumière : '#85d7ff' ,
DÉFAUT : '#1fb6ff' ,
sombre : 'selle #009' ,
} ,
rose : {
lumière : '#ff7ce5' ,
DÉFAUT : '#ff49db' ,
sombre : '#ff16d1' ,
} ,
gris : {
le plus sombre : '#1f2d3d' ,
sombre : '#3c4858' ,
DÉFAUT : 'dans #c0cc' ,
lumière : '#e0e6ed' ,
le plus léger : '#f9fafc' ,
}
} ,
famille de polices : {
sans : [ 'graphique' , 'sans-serif' ] ,
} ,
Presse ' Ctrl+S ” pour enregistrer le fichier ci-dessus.
Étape 2 : Modifier le fichier 'tailwind.config.js'
Ensuite, accédez au ' tailwind.config.js ” fichier de configuration, spécifiez le nom des chemins de modèle ainsi que spécifiez le “ preset.js ' fichier avec le ' préconfigurations ' mot-clé:
module. exportations = {
contenu : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
préconfigurations : [
( 'preset.js' )
]
}
Presse ' Ctrl+S ” pour enregistrer le fichier.
Étape 3 : Exécutez l'application
Maintenant, exécutez le ' vite-project ” dans le serveur de développement en saisissant la commande suivante :
npm run dev 
Enfin, cliquez sur le lien 'localhost' pour afficher la sortie.
Sortir
Comme on le voit, la sortie renvoie un projet rapide avec le style 'Tailwind CSS'.
Conclusion
Dans Tailwind, créez un ' prédéfini ' fichier dans le projet et spécifiez toutes les configurations du ' tailwind.config.js ” fichier dedans. Après cela, spécifiez le fichier 'preset.js' dans le fichier 'tailwind.config.js' à l'aide du mot-clé 'preset'. Le fichier 'preset.js' nouvellement créé intégrera tous les CSS personnalisés sur le modèle spécifié, de la même manière que le fichier 'tailwind.config.js'. Cet article a démontré la procédure complète pour créer un préréglage dans Tailwind.