Tutorial TailwindCSS: Tipografía y fuentes en Tailwind CSS

Fuentes predeterminadas de Tailwind CSS

Tailwind CSS viene preconfigurado con una serie de fuentes predeterminadas que se pueden utilizar directamente en tus proyectos sin necesidad de configuraciones adicionales. Estas fuentes están definidas en el archivo de configuración de Tailwind (tailwind.config.js) y se pueden aplicar mediante las clases de utilidad proporcionadas por Tailwind.

Las fuentes predeterminadas de Tailwind CSS se dividen en tres categorías principales:

• Sans-serif (font-sans): Esta es la fuente predeterminada para la mayoría de los textos. Tailwind utiliza una pila de fuentes que incluye ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, y Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol. Estas fuentes son seleccionadas en función de la disponibilidad en el sistema del usuario, garantizando una alta compatibilidad y un aspecto consistente entre diferentes dispositivos y navegadores.
• Serif (font-serif): Para textos que requieren un estilo más tradicional o formal, Tailwind proporciona una pila de fuentes serif. La pila incluye ui-serif, Georgia, Cambria, Times New Roman, Times, y serif. Al igual que con las fuentes sans-serif, la selección se realiza en función de la disponibilidad en el sistema del usuario.
• Monospace (font-mono): Para textos que requieren un espaciado fijo, como el código, Tailwind ofrece una pila de fuentes monospace. Esta pila incluye ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, y monospace.

Ejemplos de uso

Para aplicar estas fuentes en tus proyectos, simplemente utiliza las clases de utilidad correspondientes. A continuación se presentan algunos ejemplos prácticos:

<!-- Aplicando la fuente sans-serif predeterminada -->
<p class="font-sans">
  Este es un párrafo con la fuente sans-serif predeterminada.
</p>

<!-- Aplicando la fuente serif predeterminada -->
<p class="font-serif">
  Este es un párrafo con la fuente serif predeterminada.
</p>

<!-- Aplicando la fuente monospace predeterminada -->
<p class="font-mono">
  Este es un párrafo con la fuente monospace predeterminada.
</p>

Puedes combinar estas clases de utilidad con otras clases de Tailwind para estilizar aún más tus textos. Por ejemplo:

<!-- Combinando la fuente sans-serif con tamaño de fuente y color -->
<p class="font-sans text-lg text-gray-700">
  Este es un párrafo grande y gris con la fuente sans-serif predeterminada.
</p>

<!-- Combinando la fuente serif con peso de fuente y espaciado de línea -->
<p class="font-serif font-bold leading-loose">
  Este es un párrafo en negrita con la fuente serif predeterminada y un espaciado de línea suelto.
</p>

<!-- Combinando la fuente monospace con alineación de texto -->
<p class="font-mono text-right">
  Este es un párrafo alineado a la derecha con la fuente monospace predeterminada.
</p>

Estas clases de utilidad permiten una gran flexibilidad y eficiencia al aplicar estilos tipográficos en tus proyectos, facilitando la creación de interfaces consistentes y visualmente atractivas.

Clases CSS básicas de texto y de encabezados de Tailwind CSS

Tailwind CSS proporciona una serie de clases de utilidad para estilizar texto y encabezados de manera eficiente. Estas clases permiten ajustar aspectos como el tamaño de fuente, el peso, la alineación, el espaciado entre letras y líneas, y más, sin necesidad de escribir CSS personalizado.

Tamaño de fuente

Tailwind ofrece una amplia gama de tamaños de fuente que se pueden aplicar mediante las clases text-{size}. Algunos de los tamaños más comunes incluyen:

• text-xs: Extra pequeño
• text-sm: Pequeño
• text-base: Base (predeterminado)
• text-lg: Grande
• text-xl: Extra grande
• text-2xl, text-3xl, text-4xl, text-5xl, text-6xl, text-7xl, text-8xl, text-9xl: Tamaños incrementales más grandes

Ejemplo de uso:

<p class="text-sm">Texto pequeño</p>
<p class="text-lg">Texto grande</p>
<p class="text-3xl">Texto muy grande</p>

Peso de la fuente

El peso de la fuente se controla mediante las clases font-{weight}, donde {weight} puede ser:

• font-thin: 100
• font-extralight: 200
• font-light: 300
• font-normal: 400 (predeterminado)
• font-medium: 500
• font-semibold: 600
• font-bold: 700
• font-extrabold: 800
• font-black: 900

Ejemplo de uso:

<p class="font-light">Texto con fuente ligera</p>
<p class="font-bold">Texto en negrita</p>
<p class="font-extrabold">Texto en negrita extra</p>

Alineación del texto

La alineación del texto se maneja con las clases text-{align}, donde {align} puede ser:

• text-left: Alineado a la izquierda (predeterminado)
• text-center: Centrado
• text-right: Alineado a la derecha
• text-justify: Justificado

Ejemplo de uso:

<p class="text-left">Texto alineado a la izquierda</p>
<p class="text-center">Texto centrado</p>
<p class="text-right">Texto alineado a la derecha</p>
<p class="text-justify">Este párrafo tiene una alineación de texto justificado</p>

Espaciado entre letras y líneas

Para ajustar el espaciado entre letras y líneas, Tailwind ofrece las clases tracking-{size} y leading-{size} respectivamente. Algunos ejemplos de estas clases son:

• tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest: Ajustes de espaciado entre letras
• leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose: Ajustes de espaciado entre líneas

Ejemplo de uso:

<p class="tracking-wide">Texto con espaciado amplio entre letras. Texto con espaciado amplio entre letras. Texto con espaciado amplio entre letras.</p>
<p class="leading-loose">Texto con espaciado amplio entre líneas. Texto con espaciado amplio entre líneas. Texto con espaciado amplio entre líneas.</p>

Estilo de los encabezados

Para los encabezados, Tailwind proporciona clases que se pueden aplicar directamente a las etiquetas HTML de encabezado (<h1>, <h2>, etc.) para ajustar su apariencia. Por ejemplo, se pueden combinar clases de tamaño de fuente, peso y color:

<h1 class="text-4xl font-bold text-gray-800">Encabezado principal</h1>
<h2 class="text-3xl font-semibold text-gray-700">Subtítulo</h2>
<h3 class="text-2xl font-medium text-gray-600">Encabezado secundario</h3>

Color del texto

El color del texto se controla mediante las clases text-{color}, donde {color} puede ser cualquier color del esquema de Tailwind, como text-red-500, text-blue-700, text-green-600, etc.

Ejemplo de uso:

<p class="text-red-500">Texto rojo</p>
<p class="text-blue-700">Texto azul oscuro</p>
<p class="text-green-600">Texto verde</p>

Estas clases de utilidad permiten una gran flexibilidad y eficiencia en la aplicación de estilos tipográficos en proyectos, facilitando la creación de interfaces consistentes y visualmente atractivas.

Clases CSS de cuerpo de texto y transformación de texto de Tailwind CSS

Tailwind CSS ofrece una variedad de clases de utilidad para estilizar el cuerpo del texto y aplicar transformaciones de texto. Estas clases permiten ajustes en la presentación del contenido textual sin necesidad de escribir CSS personalizado.

Clases de estilización de cuerpo de texto

• Decoración del texto: La decoración del texto, como subrayado, línea sobre el texto o a través del texto, se maneja con las clases underline, overline, y line-through.

<p class="underline">Este texto está subrayado.</p>
<p class="overline">Este texto tiene una línea sobre él.</p>
<p class="line-through">Este texto tiene una línea a través de él.</p>

• Estilo de fuente: Para aplicar estilos como cursiva, se utiliza la clase italic. Para texto en estilo normal, se usa not-italic.

<p class="italic">Este texto está en cursiva.</p>
<p class="not-italic">Este texto no está en cursiva.</p>

• Transformación de texto: Tailwind proporciona clases para transformar el texto a mayúsculas, minúsculas, capitalización de palabras y capitalización de la primera letra. Las clases son uppercase, lowercase, capitalize, y normal-case.

<p class="uppercase">este texto está en mayúsculas.</p>
<p class="lowercase">ESTE TEXTO ESTÁ EN MINÚSCULAS.</p>
<p class="capitalize">este texto está capitalizado.</p>
<p class="normal-case">Este texto tiene el caso normal.</p>

Ejemplos avanzados de uso

• Combinación de clases de cuerpo de texto: Puedes combinar múltiples clases para lograr el estilo deseado.

<p class="text-lg font-semibold text-blue-700 underline leading-loose">
  Este es un texto grande, en negrita, azul, subrayado y con un espaciado de línea suelto.
</p>

• Transformaciones complejas de texto: Aplicar múltiples transformaciones y estilos puede ser útil para destacar partes del contenido.

<p class="uppercase tracking-wide text-gray-500">
  este texto está en mayúsculas, con un espaciado amplio entre letras y en color gris claro.
</p>
<p class="capitalize italic text-red-600">
  este texto está capitalizado, en cursiva y rojo.
</p>

Estas utilidades permiten una gran flexibilidad y eficiencia en la personalización del cuerpo de texto y la aplicación de transformaciones de texto, facilitando la creación de interfaces de usuario consistentes y visualmente atractivas.

Integración de Google Fonts con Tailwind CSS y fuentes personalizadas

Para integrar Google Fonts con Tailwind CSS, primero debes importar las fuentes que deseas usar en tu proyecto. Luego, deberás extender la configuración de Tailwind para incluir estas fuentes personalizadas. A continuación se describen los pasos necesarios para realizar esta integración.

1. Importar Google Fonts: Dirígete a Google Fonts y selecciona las fuentes que deseas utilizar. Luego, copia el enlace de importación proporcionado por Google Fonts y agrégalo a tu archivo HTML en la sección <head>.

<!-- Archivo index.html -->
<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@300;600&display=swap" rel="stylesheet">
</head>

2. Extender la configuración de Tailwind: Modifica el archivo tailwind.config.js para incluir las fuentes personalizadas en el tema de Tailwind. Utiliza la propiedad extend para agregar tus fuentes bajo la clave fontFamily.

// Archivo tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'roboto': ['Roboto', 'sans-serif'],
        'open-sans': ['Open Sans', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

3. Aplicar las fuentes en tu proyecto: Utiliza las clases de utilidad personalizadas que has definido para aplicar las fuentes en tus elementos HTML. Puedes combinarlas con otras clases de Tailwind para lograr el estilo deseado.

<!-- Archivo index.html -->
<body>
  <p class="font-roboto text-lg text-gray-700">
    Este es un párrafo con la fuente Roboto.
  </p>
  <p class="font-open-sans text-base text-gray-600">
    Este es un párrafo con la fuente Open Sans.
  </p>
</body>

4. Fuentes personalizadas alojadas localmente: Si prefieres usar fuentes personalizadas alojadas localmente, primero descarga las fuentes y colócalas en un directorio accesible desde tu proyecto, por ejemplo, ./fonts. Luego, importa estas fuentes en tu archivo CSS y extiende la configuración de Tailwind de manera similar a como se hace con Google Fonts.

/* Archivo styles.css */
@font-face {
  font-family: 'MyCustomFont';
  src: url('./fonts/MyCustomFont-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'MyCustomFont';
  src: url('./fonts/MyCustomFont-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

// Archivo tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'custom': ['MyCustomFont', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

<!-- Archivo index.html -->
<body>
  <p class="font-custom text-lg text-gray-700">
    Este es un párrafo con la fuente personalizada MyCustomFont.
  </p>
</body>

Estos pasos te permiten integrar Google Fonts y fuentes personalizadas en tu proyecto con Tailwind CSS, proporcionando una mayor flexibilidad y control sobre la tipografía en tus aplicaciones.