Personalizar la paleta de colores
Tailwind incluye una paleta de colores que funciona como un punto de inicio excelente, si es que no tienes aún definida una para tu proyecto.
Ver la paleta de colores de Tailwind
Cuando necesites personalizar tu paleta, puedes configurar tus propios colores dentro de la llave colores en la configuración theme en el archivo tailwind.config.js.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// Configure your color palette here
},
},
}
Si deseamos construir una nueva paleta de colores, podemos configurar nuestros propios colores desde cero, o reducir la crear una paleta de colores a partir de la paleta provista por tailwind.
Utilizar colores personalizados
Si quieres reemplazar completamente la paleta por default por una paleta con tus propios colores, agrega los colores directamente dentro de la sección theme.colors de tu archivo de configuración.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
white: '#ffffff',
purple: '#3f3cbb',
midnight: '#121063',
metal: '#565584',
tahiti: '#3ab7bf',
silver: '#ecebff',
'bubble-gum': '#ff77e9',
bermuda: '#78dcca',
},
},
}
Por default, estos colores reemplazaran los disponibles en todos los lugares del framework en donde se utilicen colores como las utilidades: text color, border color, background color, entre otras.
<div class="bg-midnight text-tahiti">
<!-- ... -->
</div>
No olvides incluir colores como
transparentycurrentColorsi deseas utilizarlos en tu proyecto.
Sintaxis del objeto color
Cuando tu paleta incluye varios tonos del mismo color, puede ser conveniente agruparlos juntos utilizando la sintaxis de objeto de color anidado:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
white: '#ffffff',
tahiti: {
100: '#cffafe',
200: '#a5f3fc',
300: '#67e8f9',
400: '#22d3ee',
500: '#06b6d4',
600: '#0891b2',
700: '#0e7490',
800: '#155e75',
900: '#164e63',
},
// ...
},
},
}
Las llaves anidadas serán combinadas con la clave padre para formar clases como bg-tahiti-400.
Como en muchos otros lugares dentro de Tailwind, la llave DEFAULT puede ser utilizada cuando desees definir un valor sin un sufijo.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// ...
tahiti: {
light: '#67e8f9',
DEFAULT: '#06b6d4',
dark: '#0e7490',
},
// ...
},
},
}
Esto creará las clases bg-tahiti, bg-tahiti-light y bg-tahiti-dark.
Valores arbitrarios
Si necesitas un color personalizado único en tu proyecto, considera utilizar la notación de valor arbitrario de Tailwind para generar una clase para ese color bajo demanda en lugar de agregarlo a tu tema:
<button class="bg-[#1da1f2] text-white px-5 py-3 font-bold">
Compartir en Twitter
</button>
Generar colores
Para obtener los mejores resultados, los tonos y tonos de Tailwind fueron elegidos manualmente, equilibrándolos meticulosamente a simple vista y probándolos en diseños reales.
Si estás creando tu propia paleta de colores personalizada y no te sientes seguro haciéndolo manualmente, UI Colors que es una excelente herramienta que puede proporcionarte un buen punto de partida basado en cualquier color personalizado.
Dos herramientas útiles adicionales que recomendamos para construir tus propias paletas son Palettte y ColorBox; no harán el trabajo por ti, pero sus interfaces están bien diseñadas para este tipo de tarea.
Utilizando los colors por default
Si no tienes un set de colores en mente para tu proyecto, puedes seleccionar tus colores de una lista de la paleta de Tailwind utilizando tailwindcss/colors dentro del archivo de configuración y elegir los colores que quieres utilizar.
// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.gray,
emerald: colors.emerald,
indigo: colors.indigo,
yellow: colors.yellow,
},
},
}
Esto puede ser útil cuando deseas limitar tu paleta de colores y reducir el número de clases mostradas por el autocomplete del editor de código.
Uso de alias para colores
Puedes también crear alias para la paleta de colores por default para hacer que esta sea mas sencilla de recordar.
// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.slate,
green: colors.emerald,
purple: colors.violet,
yellow: colors.amber,
pink: colors.fuchsia,
},
},
}
Esto es especialmente común en los grises, ya que generalmente solo usas un conjunto en cualquier proyecto dado y es conveniente poder escribir bg-gray-300 en lugar de bg-neutral-300, por ejemplo.
Agregar colores adicionales
Si deseas agregar un color adicional a la paleta estándar, agrega los valores en la sección theme.extend.colors del archivo de configuración.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
brown: {
50: '#fdf8f6',
100: '#f2e8e5',
200: '#eaddd7',
300: '#e0cec7',
400: '#d2bab0',
500: '#bfa094',
600: '#a18072',
700: '#977669',
800: '#846358',
900: '#43302b',
},
},
},
},
}
Puedes también utilizar theme.extend.colors para añadir tonos a los colores existentes si es requerido por tu diseño.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
blue: {
950: '#17275c',
},
},
},
},
}
Deshabilitar colores por default
Si deseas deshabilitar algunos de los colores que son provistos por Tailwind, la mejor forma de hacerlo es sobreescribir la paleta de colores por default e incluir los colores que deseas utilizar.
// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.gray,
emerald: colors.emerald,
indigo: colors.indigo,
yellow: colors.yellow,
},
},
}
Nombrar colores en Tailwind
Tailwind utiliza nombres de colores (red, green, orange, etc.) y escalas numéricas (en donde 50 es el brillante y 900 el mas oscuro). Esto resulta una forma sencilla de manejar los proyectos, en lugar de utilizar nombres abstractos como primary o danger.
Habiendo dicho esto, puedes nombrar tus colores en Tailwind de la manera en la que quieras, y si estas trabajando en un proyecto que esta organizado previamente de esta forma, quizás tenga sentido utilizar este tipo de nombres abstractos.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
primary: '#5c6ac4',
secondary: '#ecc94b',
// ...
},
},
}
Se puede configurar esos colores de forma explícita, o puedes traer los colores desde la paleta de colores de Tailwind.
// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
primary: colors.indigo,
secondary: colors.yellow,
neutral: colors.gray,
},
},
}
Se recomienda mantener el uso de las convenciones provistas para los nuevos proyectos, y solo utilizar nombres abstractos si se tiene una buena razón para hacerlo.