¿Cómo crear tus propios presets de configuración reutilizables? 😊
Por default cualquier configuración que incluyas en el archivo tailwind.config.js es fusionada con la configuración por default, y tu configuración personalizada tiene precedencia con aquella que es default.
La opción presets permite especificar una configuración distinta para utilizar como base, haciendo sencillo empaquetar un grupo de configuraciones que desees utilizar a través de diferentes proyectos.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [require('@acmecorp/tailwind-base')],
// ...
}
Esto puede ser muy útil para equipos que manejan multiples proyectos de Tailwind para la misma marca, y desean tener un grupo de colores, fuentes y otras personalizaciones.
Creando un preset
Los presets son objetos de configuración que toman la misma forma de la configuración que existe en el archivo tailwind.config.js.
// mi-preset.js
module.exports = {
theme: {
colors: {
blue: {
light: '#85d7ff',
DEFAULT: '#1fb6ff',
dark: '#009eeb',
},
pink: {
light: '#ff7ce5',
DEFAULT: '#ff49db',
dark: '#ff16d1',
},
gray: {
darkest: '#1f2d3d',
dark: '#3c4858',
DEFAULT: '#c0ccda',
light: '#e0e6ed',
lightest: '#f9fafc',
},
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
},
extend: {
flexGrow: {
2: '2',
3: '3',
},
zIndex: {
60: '60',
70: '70',
80: '80',
90: '90',
100: '100',
},
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
],
}
Puedes ver que los presets pueden contener todas las opciones de configuración, incluyendo sobreescritura de temas, extensiones, plugins, prefijos, y mas.
Asumiendo que este preset se haya guardado con el nombre mi-preset.js, lo utilizarías añadiéndolo ala archivo tailwind.config.js dentro de tu propio proyecto en la parte presets.
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [require('./mi-preset.js')],
// Customizations specific to this project would go here
theme: {
extend: {
minHeight: {
48: '12rem',
},
},
},
}
Por default, los presets extienden la configuración de Tailwind de la misma forma en la que tu propia configuración lo haría. Si deseas crear un preset que reemplace completamente la configuración por default, establece un presets vacio.
module.exports = {
presets: [],
theme: {
// ...
},
plugins: [
// ...
],
}
La lógica del fusionado vista a profundidad
Las configuraciones específicas del proyecto (las que se encuentran en tu archivo tailwind.config.js) se fusionan con los preset de la misma manera en que se fusionan con la configuración predeterminada.
Las siguientes opciones en tailwind.config.js simplemente reemplaza la misma opción si está presente en un preset:
- content
- darkMode
- prefix
- important
- variantOrder
- separator
- safelist
Las demás opciones se fusionan cuidadosamente de la manera que tenga más sentido para esa opción, como se explica con más detalle a continuación.
Theme (Tema)
El objeto del theme se fusiona de forma superficial, con las claves de nivel superior en tailwind.config.js reemplazando las mismas claves de nivel superior en cualquier preset. La excepción a esto es la clave extend, que se recopila en todas las configuraciones y se aplica por encima del resto de la configuración del tema.
Presets (Preajuste)
El array de presets se fusiona entre configuraciones, permitiendo que los preset incluyan sus propios preset, que también pueden incluir sus propios preset.
Plugins
El arreglo plugins se fusiona entre configuraciones para permitir que un preset registre plugins y, al mismo tiempo, te permite agregar plugins adicionales a nivel de proyecto.
Esto significa que no es posible desactivar un plugin que ha sido agregado por un preset. Si te encuentras deseando desactivar un plugin en un preset, es una señal de que probablemente debas eliminar ese plugin del preset e incluirlo en cada proyecto individualmente, o dividir tu preset en dos presets.
Core plugins (Plugins base)
La opción corePlugins se comporta de manera diferente dependiendo si lo configuras como un objeto o como un arreglo.
Si lo configuras como un objeto, es fusionado a través de la configuración.
// tailwind.config.js
module.exports = {
// ...
corePlugins: {
float: false,
},
}
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [require('./mi-preset.js')],
// esto será fusionado
corePlugins: {
cursor: false,
},
}
Si configuras corePlugins.js como un arreglo, este reemplaza cualquier configuración corePlugins provista por tus presets.
// mi-preset.js
module.exports = {
// ...
corePlugins: {
float: false,
},
}
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [require('./example-preset.js')],
// esto reemplazará la configuración en el preset
corePlugins: ['float', 'padding', 'margin'],
}
Extender multiples presets
La opción presets es un arreglo que puede aceptar múltiples presets. Esto puede ser útil si deseas dividir tus personalizaciones reutilizables en multiples partes que puedan ser importadas individualmente.
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [
require('@acmecorp/tailwind-colors'),
require('@acmecorp/tailwind-fonts'),
require('@acmecorp/tailwind-spacing'),
],
}
Cuando se agregan varios presets, es importante tener en cuenta que si se superponen de alguna manera, se resuelven de la misma manera que tus propias personalizaciones se resuelven en comparación con un preset, y la última configuración gana.
Por ejemplo, si ambas de estas configuraciones proporcionan una paleta de colores personalizada (y no están utilizando extend), se utilizará la paleta de colores de la configuración-b.
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [
require('@acmecorp/configuration-a'),
require('@acmecorp/configuration-b'),
],
}
Deshabilitando la configuración por default
Si deseas deshabilitar completamente la configuración por default e iniciar sin configuración base, utiliza presets para hablar de un arreglo vacío.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [],
// ...
}
Esto deshabilitará por completo todas las configuraciones predeterminadas de Tailwind, por lo que no se generarán colores, familias de fuentes, tamaños de fuente, valores de espaciado, etc.
También puedes hacer esto desde dentro de un preset si deseas que tu preset proporcione un sistema de diseño completo por sí mismo que no extienda las configuraciones predeterminadas de Tailwind:
// mi-preset.js
module.exports = {
presets: [],
// ...
}
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [require('./mi-preset.js')],
// ...
}