Tailwind CSS proporciona un archivo de configuración altamente personalizable donde se puede modificar el tema predeterminado para adaptarlo mejor a los requisitos de diseño de tu proyecto. Este capítulo abarca cómo personalizar paletas de colores, establecer fuentes personalizadas y ajustar la escala de espaciado.

Nota

Para personalizar cualquier estilo predeterminado de Tailwind CSS, es necesario actualizar el archivo tailwind.config.js.

Personalización de paletas de colores

Se pueden agregar nuevos colores, extender los existentes o sobrescribir completamente la paleta de colores predeterminada.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#1DA1F2',
        customGreen: '#17BF63',
        customRed: '#E0245E',
      },
    },
  },
};

Luego, al agregar una paleta de colores personalizada, estuvimos listos para utilizarla en el HTML.

<div class="bg-customBlue text-white p-4">Custom Blue Background</div>
<div class="bg-customGreen text-white p-4">Custom Green Background</div>
<div class="bg-customRed text-white p-4">Custom Red Background</div>

Configuración de fuentes personalizadas

También es posible personalizar las fuentes en Tailwind CSS añadiendo nuevas familias tipográficas al archivo de configuración.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Helvetica', 'Arial', 'sans-serif'],
        serif: ['Georgia', 'serif'],
        mono: ['Courier New', 'monospace'],
      },
    },
  },
};

Después, cambiamos al HTML.

<div class="font-sans text-lg">Sans-serif Font</div>
<div class="font-serif text-lg">Serif Font</div>
<div class="font-mono text-lg">Monospace Font</div>

Personalización de la escala de espaciado

Tailwind CSS proporciona una escala de espaciado predeterminada, pero se puede personalizar para adaptarse a los requisitos de diseño añadiendo o modificando valores de espaciado en el archivo de configuración.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
};

Uso en HTML.

<div class="p-72 bg-gray-200">Padding 18rem</div>
<div class="p-84 bg-gray-300">Padding 21rem</div>
<div class="p-96 bg-gray-400">Padding 24rem</div>

Nota

Se ha comprendido el principio. Cualquier clase utilitaria puede ampliarse con funcionalidad en el archivo de configuración. La documentación sobre este tema se encuentra disponible aquí.