En esta clase aprenderemos cómo personalizar las tipografías de tu proyecto con Tailwind CSS, haciéndolo de manera reutilizable y eficiente.

Configuración Inicial

Para personalizar las fuentes, utilizamos la configuración de font family en el archivo tailwind.config.js. Esto permite definir las tipografías globales del proyecto de forma centralizada.

Pasos para Configurar las Fuentes

1. Incluir las Fuentes de Google
   Añade las fuentes que desees utilizar (por ejemplo, Montserrat y Roboto) en tu proyecto siguiendo las instrucciones de Google Fonts.

2. Modificar el Archivo tailwind.config.js
   En el objeto theme, define tus fuentes en la propiedad fontFamily. Ejemplo:

   theme: {
       extend: {
           fontFamily: {
               heading: ['Montserrat', 'sans-serif'],
               text: ['Roboto', 'sans-serif'],
           },
       },
   }
   

• heading: Para los encabezados (ejemplo: h1, h2).

-- text: Para los textos principales (ejemplo: párrafos).

3. Aplicar las Clases a los Elementos

Usa las clases personalizadas directamente en tus elementos HTML. Ejemplo:

• Encabezados: class="font-heading"

• Textos: class="font-text"

Mejora de la Reutilización

Para evitar repetir clases en múltiples elementos, puedes usar la directiva @apply en tus estilos. Esto simplifica la gestión de tipografías para elementos comunes como h1, h2 o p.

Ejemplo de Uso de @apply

Define estilos globales en tu archivo CSS:

h1, h2, h3 {
    @apply font-heading;
}

p {
    @apply font-text;
}

De esta forma, los estilos de tipografía se aplican automáticamente a todos los elementos correspondientes sin necesidad de agregar clases manualmente.

Ventajas de Usar Nombres Genéricos

Utilizar nombres genéricos como heading o text en lugar de nombres específicos (por ejemplo, Montserrat o Roboto) tiene varias ventajas:

• Facilidad para Cambiar Fuentes: Si decides usar una fuente diferente en el futuro, solo necesitas actualizar el archivo de configuración.

• Código Más Limpio: Los nombres genéricos hacen que el código sea más fácil de entender y mantener.

Casos Especiales

Si necesitas usar una fuente específica para un elemento concreto, puedes aplicar clases directamente:

<div class="font-special">Texto con una fuente especial</div>

Esto permite manejar situaciones únicas sin afectar la configuración global.

Resumen

1. Configura las fuentes globales en tailwind.config.js.

2. Usa nombres genéricos para facilitar cambios futuros.

3. Aplica @apply para gestionar estilos comunes en los elementos.

4. Maneja casos especiales con clases específicas.

Con estas prácticas, lograrás un sistema de tipografías reutilizable, limpio y fácil de mantener.