Este artículo explica el procedimiento completo para crear un ajuste preestablecido en Tailwind.
¿Cómo crear un 'preajuste' en Tailwind?
Viento de cola “ Preajustes ” se consideran los objetos de configuración regulares que especifican la misma configuración que se especifica en el archivo de configuración “tailwind.config.js”. El archivo 'preestablecido' no se crea de forma predeterminada, sin embargo, se puede crear siguiendo los pasos que se indican a continuación:
Paso 1: crea un archivo 'preestablecido'
Primero, crea un “ preestablecido.js ” en el proyecto Tailwind y agregue todas las opciones de configuración deseadas, como extensiones, anulaciones de temas, complementos y mucho más:
// ejemplo preestablecido
módulo. exportaciones = {
tema : {
colores : {
azul : {
luz : '#85d7ff' ,
POR DEFECTO : '#1fb6ff' ,
oscuro : '#009 silla de montar' ,
} ,
rosa : {
luz : '#ff7ce5' ,
POR DEFECTO : '#ff49db' ,
oscuro : '#ff16d1' ,
} ,
gris : {
más oscuro : '#1f2d3d' ,
oscuro : '#3c4858' ,
POR DEFECTO : 'en #c0cc' ,
luz : '#e0e6ed' ,
más ligero : '#f9fafc' ,
}
} ,
Familia tipográfica : {
sin : [ 'gráfico' , 'sans serif' ] ,
} ,
Prensa ' Control+S ” para guardar el archivo anterior.
Paso 2: edite el archivo 'tailwind.config.js'
A continuación, navegue hasta el ' tailwind.config.js ” archivo de configuración, especifique el nombre de las rutas de la plantilla y especifique el “ preestablecido.js ” archivo con el “ Preajustes palabra clave:
módulo. exportaciones = {
contenido : [
'./index.html' ,
'./src/**/*.{js,ts,jsx,tsx}' ,
] ,
Preajustes : [
( 'preestablecido.js' )
]
}
Prensa ' Control+S ” para guardar el archivo.
Paso 3: Ejecute la aplicación
Ahora, ejecute el existente “ proyecto rapido ” en el servidor de desarrollo ingresando el siguiente comando:
npm ejecutar dev 
Por último, haga clic en el enlace 'localhost' para mostrar el resultado.
Producción
Como se ve, la salida devuelve un proyecto vite con estilo 'Tailwind CSS'.
Conclusión
En Tailwind, crea un ' Preestablecido ” en el proyecto y especifique todas las configuraciones del “ tailwind.config.js ” archivo en él. Después de eso, especifique el archivo 'preset.js' en el archivo 'tailwind.config.js' con la ayuda de la palabra clave 'preset'. El archivo 'preset.js' recién creado incrustará todo el CSS personalizado en la plantilla especificada al igual que el archivo 'tailwind.config.js'. Este artículo demostró el procedimiento completo para crear un ajuste preestablecido en Tailwind.