En este módulo exploraremos cómo controlar el estilo del texto, gestionar espacios, configurar fondos y bordes, definir colores personalizados y utilizar fuentes personalizadas, incluidas las de Google Fonts, todo utilizando Tailwind CSS.

Control de texto: tamaños, colores y alineación

Tailwind CSS ofrece una gran variedad de clases utilitarias para controlar el aspecto del texto, incluyendo su tamaño, color, alineación y estilo. A continuación, veremos cómo aplicar estos estilos al texto:

1. Tamaño de texto (text-size): Tailwind tiene clases predefinidas para cambiar el tamaño del texto. Algunas de las más comunes son:

   html Code

   1<p class="text-xs">Texto muy pequeño</p>
   2<p class="text-base">Texto de tamaño normal (base)</p>
   3<p class="text-lg">Texto grande</p>
   4<p class="text-2xl">Texto muy grande</p>

   Puedes consultar todos los tamaños de texto disponibles en la documentación oficial.

2. Color del texto (text-color): Para cambiar el color del texto, Tailwind ofrece clases predefinidas basadas en una paleta de colores que se puede personalizar. Ejemplo:

   html Code

   1<p class="text-red-500">Texto rojo</p>
   2<p class="text-blue-700">Texto azul oscuro</p>
   3<p class="text-gray-900">Texto gris oscuro</p>

   Puedes ver todas las opciones de color en la documentación.

3. Alineación del texto (text-align): Tailwind también facilita la alineación del texto con clases como text-left, text-center y text-right:

   html Code

   1<p class="text-left">Texto alineado a la izquierda</p>
   2<p class="text-center">Texto centrado</p>
   3<p class="text-right">Texto alineado a la derecha</p>

   Consulta más detalles sobre la alineación de texto en la documentación.

4. Otras propiedades de texto:

   • Estilo de fuente (font-style):
   html Code

   1<p class="italic">Texto en cursiva</p>
   2<p class="not-italic">Texto normal</p>
   • Peso de fuente (font-weight):
   html Code

   1<p class="font-bold">Texto en negrita</p>
   2<p class="font-light">Texto ligero</p>

Clases para manejo de espacios (margins, paddings)

Tailwind utiliza un sistema de clases utilitarias para el manejo de márgenes y rellenos (padding). Estas clases son consistentes y fáciles de usar.

1. Márgenes (m-): Para manejar los márgenes externos de los elementos, puedes usar las clases m (para todos los lados) o mt, mb, ml, mr para márgenes específicos. Ejemplos:

   html Code

   1<div class="m-4">Margen de 1 rem en todos los lados</div>
   2<div class="mt-2">Margen superior de 0.5 rem</div>

   Para más detalles sobre márgenes: Margen en la documentación.

2. Padding (p-): El padding o relleno es similar al margen. Para aplicarlo, usa las clases p para todos los lados o pt, pb, pl, pr para rellenos específicos:

   html Code

   1<div class="p-6">Padding de 1.5 rem en todos los lados</div>
   2<div class="pt-3">Padding superior de 0.75 rem</div>

   Más detalles en la documentación.

Propiedades de fondo y bordes

Tailwind CSS facilita el control de los fondos y bordes de tus elementos a través de clases utilitarias simples.

1. Fondo (background): Tailwind ofrece clases para manejar el color de fondo (bg), imágenes de fondo y posición. Ejemplo:

   html Code

   1<div class="bg-blue-500">Fondo azul</div>
   2<div class="bg-gradient-to-r from-blue-500 to-green-500">Degradado</div>

   Documentación completa sobre fondos: Backgrounds en Tailwind.

2. Bordes (border): Para agregar bordes a un elemento, puedes usar las clases border, border-color, border-width, entre otras. Ejemplo:

   html Code

   1<div class="border border-blue-800">Div con borde azul</div>
   2<div class="border-2 border-red-600">Div con borde rojo grueso</div>

   Documentación completa sobre bordes: Bordes en Tailwind.

Definir y modificar la paleta de colores

Tailwind permite personalizar la paleta de colores en el archivo tailwind.config.js. Esto es útil si deseas usar colores específicos para tu proyecto.

1. Abre el archivo tailwind.config.js y busca la sección theme.extend. Aquí puedes agregar tus propios colores:

   1module.exports = {
   2  theme: {
   3    extend: {
   4      colors: {
   5        primary: '#ff6363',
   6        secondary: '#3b82f6',
   7      }
   8    },
   9  },
   10}

2. Ahora puedes usar tus colores personalizados en tu proyecto:

   html Code

   1<p class="text-primary">Texto en color primario</p>
   2<div class="bg-secondary">Fondo en color secundario</div>

   Más información sobre la personalización de colores: Custom Colors.

Uso de fuentes personalizadas y Google Fonts

Para usar una fuente personalizada, como las disponibles en Google Fonts, sigue estos pasos:

1. Importar Google Fonts: Puedes agregar Google Fonts a tu proyecto usando la etiqueta <link> en tu archivo HTML principal o importándola en tu archivo CSS.

   Ejemplo con <link>:

   1<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"/>

2. Configurar Tailwind para usar la fuente: En el archivo tailwind.config.js, añade la fuente personalizada a la configuración de la propiedad fontFamily:

   1module.exports = {
   2  theme: {
   3    extend: {
   4      fontFamily: {
   5        sans: ['Roboto', 'sans-serif'],
   6      },
   7    },
   8  },
   9}

3. Aplicar la fuente en tus elementos: Usa las clases de font-family para aplicar la nueva fuente en tus elementos:

   html Code

   1<div class="font-sans">Texto aplicando fuente Roboto</div>

Para más detalles sobre cómo usar y personalizar fuentes: Fonts en Tailwind.

---

Con estos conceptos y ejemplos básicos, puedes tener control total sobre la tipografía y los estilos visuales de tu sitio utilizando Tailwind CSS.