Configurar el tema por default de tu proyecto
La sección theme (tema) de tu archivo tailwind.config.js es donde defines la paleta de colores, escala de tipos, fuentes, puntos de quiebre, valores de radio de borde y más de tu proyecto.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
colors: {
blue: '#1fb6ff',
purple: '#7e5bef',
pink: '#ff49db',
orange: '#ff7849',
green: '#13ce66',
yellow: '#ffc82c',
'gray-dark': '#273444',
gray: '#8492a6',
'gray-light': '#d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
128: '32rem',
144: '36rem',
},
borderRadius: {
'4xl': '2rem',
},
},
},
}
Tailwind un tema predeterminado sensato con un conjunto muy generoso de valores para que comiences, pero no tengas miedo de cambiarlo o ampliarlo.
Estructura del tema
El objeto theme contiene claves para pantallas, colores y espaciado, así como una clave para cada plugin base.
Screens (Pantallas)
La clave screens te permite personalizar los puntos de quiebre responsivos en tu proyecto.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
},
}
Colors (Colores)
El objeto colors te permite personalizar la paleta de colores global de tu proyecto.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
transparent: 'transparent',
black: '#000',
white: '#fff',
gray: {
100: '#f7fafc',
// ...
900: '#1a202c',
},
// ...
},
},
}
Por default estos colores son heredados por todos aquellos valores relacionados con los colores, como backgroundColor, borderColor, textColor y otros.
Spacing (Espaciado)
El objeto spacing permite personalizar los valores globales de espaciamiento, tamaño y escala del proyecto.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
spacing: {
px: '1px',
0: '0',
0.5: '0.125rem',
1: '0.25rem',
1.5: '0.375rem',
2: '0.5rem',
2.5: '0.625rem',
3: '0.75rem',
3.5: '0.875rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
11: '2.75rem',
12: '3rem',
14: '3.5rem',
16: '4rem',
20: '5rem',
24: '6rem',
28: '7rem',
32: '8rem',
36: '9rem',
40: '10rem',
44: '11rem',
48: '12rem',
52: '13rem',
56: '14rem',
60: '15rem',
64: '16rem',
72: '18rem',
80: '20rem',
96: '24rem',
},
},
}
Por default estos valores son heredados por padding, margin, width, height, maxHeight, flex-basis, gap, inset, space, translate, scrollMargin, scrollPadding y textIndent.
Core Plugins (Plugins principales)
El resto de la sección theme es utilizado para configurar cuales valores están disponibles para cada plugin base.
Por ejemplo, el borderRadius permite personalizar el radio del borde.
module.exports = {
theme: {
borderRadius: {
none: '0',
sm: '.125rem',
DEFAULT: '.25rem',
lg: '.5rem',
full: '9999px',
},
},
}
Las claves determinan el sufijo para las clases generadas, y los valores determinan el valor de la declaración CSS real.
La configuración de ejemplo de borderRadius mencionada anteriormente generaría las siguientes clases CSS:
.rounded-none {
border-radius: 0;
}
.rounded-sm {
border-radius: 0.125rem;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-full {
border-radius: 9999px;
}
Notarás que al utilizar la clave DEFAULT en la configuración del tema, se creó la clase rounded sin ningún sufijo. Esta es una convención común en Tailwind y es compatible con todos los complementos centrales.
Personalización del tema predeterminado
De manera predeterminada, tu proyecto heredará automáticamente los valores de la configuración del tema por defecto. Si deseas personalizar el tema por defecto, tienes varias opciones diferentes dependiendo de tus objetivos.
Extender el tema predeterminado
Si deseas conservar los valores predeterminados de una opción de tema pero también agregar nuevos valores, añade tus extensiones bajo la clave theme.extend en tu archivo de configuración. Los valores bajo esta clave se fusionan con los valores existentes de theme y automáticamente se convierten en nuevas clases que puedes utilizar.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
fontFamily: {
display: 'Oswald, ui-serif', // Adds a new `font-display` class
},
},
},
}
Si queremos por ejemplo agregar uan nueva variante de tamaño a las ya existentes llamada 3xl.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
theme: {
extend: {
screens: {
'3xl': '1600px',
},
},
},
plugins: [],
}
Con esta adición, podemos empezar a utilizar esta clase responsiva en nuestro proyecto.
<div class="bg-slate-500 min-h-screen p-10">
<div class="bg-white p-5 rounded-lg">
<div class="text-2xl 3xl:text-red-600">S3</div>
</div>
</div>
Sobreescribir el tema predeterminado
Para sobreescribir una opción default en el tema, agrega el valor dentro de la sección theme.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
// Replaces all of the default `opacity` values
opacity: {
0: '0',
20: '0.2',
40: '0.4',
60: '0.6',
80: '0.8',
100: '1',
},
},
}
Esto reemplazará completamente la configuración por default de esta llave, de tal forma que en el ejemplo anterior, ninguna de las utilidades para opacidad serán generadas.
Cualquier llave que no proporciones sera heredada del tema por default, de tal forma que en el ejemplo anterior, la configuración del tema por default para cosas como colores, espaciamiento, radio del borde, posición del fondo, etc. será preservada.
Es posible también sobreescribir algunas partes del proyecto y extender otras dentro de la misma configuración.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
opacity: {
0: '0',
20: '0.2',
40: '0.4',
60: '0.6',
80: '0.8',
100: '1',
},
extend: {
screens: {
'3xl': '1600px',
},
},
},
}
Referenciar a otros valores
Si necesitas hacer referencia a otro valor en el tema, puedes utilizar la función theme() para acceder a la notación de punto.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
spacing: {
// ...
},
backgroundSize: ({ theme }) => ({
auto: 'auto',
cover: 'cover',
contain: 'contain',
...theme('spacing'),
}),
},
}
La función theme() intenta encontrar el valor que estás buscando a partir del objeto de tema completamente fusionado, por lo que puede hacer referencia a tus propias personalizaciones, así como a los valores predeterminados del tema. También funciona de manera recursiva, por lo que siempre que haya un valor estático al final de la cadena, podrá resolver el valor que estás buscando.
Referenciar al tema predeterminado
Si deseas referenciar un valor en un tema default por cualquier razón, puedes importar tailwindcss/defaultTheme.
Un ejemplo en donde esto es útil es si tu deseas agregar una fuente a uno de los stacks por default.
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Lato', ...defaultTheme.fontFamily.sans],
},
},
},
}
Desactivación de un plugin principal completo
Si deseas que no se generen clases para determinado plugin, es mejor establecer dicho plugin como false dentro de la configuración corePlugins, que proveer un objeto vacío dentro de theme.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: {
opacity: false,
},
}