Clases de colores y fondo

Clases de color de texto de Tailwind CSS

En Tailwind CSS, las clases de color de texto permiten especificar el color del texto de los elementos HTML de manera sencilla y eficiente. Estas clases siguen una convención de nombres que facilita su uso y comprensión.

Las clases de color de texto se estructuran de la siguiente manera: text-{color}-{shade}, donde {color} es el nombre del color y {shade} es la tonalidad del color. Tailwind CSS ofrece una amplia gama de colores y tonalidades predefinidas.

Ejemplos de colores predefinidos

A continuación, se muestran ejemplos de algunas clases de color de texto disponibles en Tailwind CSS:

<!-- Texto rojo -->
<p class="text-red-500">Este es un texto rojo.</p>

<!-- Texto azul -->
<p class="text-blue-500">Este es un texto azul.</p>

<!-- Texto verde -->
<p class="text-green-500">Este es un texto verde.</p>

Tonalidades de colores

Cada color tiene múltiples tonalidades que van desde 50 hasta 900, lo que permite un control granular sobre la intensidad del color. Aquí hay algunos ejemplos:

<!-- Tonalidades de rojo -->
<p class="text-red-50">Rojo 50</p>
<p class="text-red-100">Rojo 100</p>
<p class="text-red-200">Rojo 200</p>
<p class="text-red-300">Rojo 300</p>
<p class="text-red-400">Rojo 400</p>
<p class="text-red-500">Rojo 500</p>
<p class="text-red-600">Rojo 600</p>
<p class="text-red-700">Rojo 700</p>
<p class="text-red-800">Rojo 800</p>
<p class="text-red-900">Rojo 900</p>

Uso de colores extendidos

Además de los colores básicos, Tailwind CSS incluye una paleta extendida que abarca colores como cyan, lime, amber, entre otros. Estos colores también siguen la misma convención de nombres.

<!-- Texto cian -->
<p class="text-cyan-500">Este es un texto cian.</p>

<!-- Texto lima -->
<p class="text-lime-500">Este es un texto lima.</p>

<!-- Texto ámbar -->
<p class="text-amber-500">Este es un texto ámbar.</p>

Ejemplos avanzados

Para aplicaciones más complejas, se pueden combinar las clases de color de texto con otras utilidades de Tailwind CSS para crear interfaces de usuario dinámicas y atractivas.

<!-- Texto con otras utilidades -->
<p class="text-blue-500 hover:text-blue-700">Pasa el ratón por aquí para cambiar el color.</p>
<p class="text-gray-500 dark:text-gray-300">Este texto cambia de color en modo oscuro.</p>

Consideraciones sobre accesibilidad

Al utilizar clases de color de texto, es importante tener en cuenta la accesibilidad. Asegúrate de que haya suficiente contraste entre el color del texto y el color de fondo para que el contenido sea legible para todas las personas, incluidas aquellas con discapacidades visuales.

<!-- Ejemplo de buen contraste -->
<p class="text-black bg-white">Texto negro sobre fondo blanco.</p>

<!-- Ejemplo de mal contraste -->
<p class="text-gray-500 bg-gray-400">Texto gris sobre fondo gris.</p>

Personalización

Tailwind CSS permite personalizar la paleta de colores mediante la directiva @theme en el archivo CSS. Esto es útil para definir colores específicos que no están incluidos en la paleta predeterminada.

@import "tailwindcss";

@theme {
  --color-custom-blue: #1e40af;
  --color-custom-green: #10b981;
}

<!-- Uso de colores personalizados -->
<p class="text-custom-blue">Este es un texto con azul personalizado.</p>
<p class="text-custom-green">Este es un texto con verde personalizado.</p>

Estas clases de color de texto en Tailwind CSS proporcionan una forma flexible y escalable de gestionar los colores en tus proyectos web, permitiendo una rápida implementación y fácil mantenimiento.

Clases de color de fondo de Tailwind CSS

En Tailwind CSS, las clases de color de fondo permiten establecer el color de fondo de los elementos HTML de manera eficiente y coherente. Estas clases siguen una convención de nombres que facilita su uso y comprensión.

Las clases de color de fondo se estructuran de la siguiente manera: bg-{color}-{shade}, donde {color} es el nombre del color y {shade} es la tonalidad del color. Tailwind CSS ofrece una amplia gama de colores y tonalidades predefinidas.

Ejemplos de colores predefinidos

A continuación, se muestran ejemplos de algunas clases de color de fondo disponibles en Tailwind CSS:

<!-- Fondo rojo -->
<div class="bg-red-500">Este es un fondo rojo.</div>

<!-- Fondo azul -->
<div class="bg-blue-500">Este es un fondo azul.</div>

<!-- Fondo verde -->
<div class="bg-green-500">Este es un fondo verde.</div>

Tonalidades de colores

Cada color tiene múltiples tonalidades que van desde 50 hasta 900, lo que permite un control granular sobre la intensidad del color. Aquí hay algunos ejemplos:

<!-- Tonalidades de rojo -->
<div class="bg-red-50">Rojo 50</div>
<div class="bg-red-100">Rojo 100</div>
<div class="bg-red-200">Rojo 200</div>
<div class="bg-red-300">Rojo 300</div>
<div class="bg-red-400">Rojo 400</div>
<div class="bg-red-500">Rojo 500</div>
<div class="bg-red-600">Rojo 600</div>
<div class="bg-red-700">Rojo 700</div>
<div class="bg-red-800">Rojo 800</div>
<div class="bg-red-900">Rojo 900</div>

Uso de colores extendidos

Además de los colores básicos, Tailwind CSS incluye una paleta extendida que abarca colores como cyan, lime, amber, entre otros. Estos colores también siguen la misma convención de nombres.

<!-- Fondo cian -->
<div class="bg-cyan-500">Este es un fondo cian.</div>

<!-- Fondo lima -->
<div class="bg-lime-500">Este es un fondo lima.</div>

<!-- Fondo ámbar -->
<div class="bg-amber-500">Este es un fondo ámbar.</div>

Ejemplos avanzados

Para aplicaciones más complejas, se pueden combinar las clases de color de fondo con otras utilidades de Tailwind CSS para crear interfaces de usuario dinámicas y atractivas.

<!-- Fondo con otras utilidades -->
<div class="bg-blue-500 hover:bg-blue-700 p-4">Pasa el ratón por aquí para cambiar el color.</div>
<div class="bg-gray-500 dark:bg-gray-300 p-4">Este fondo cambia de color en modo oscuro.</div>

Consideraciones sobre accesibilidad

Al utilizar clases de color de fondo, es importante tener en cuenta la accesibilidad. Asegúrate de que haya suficiente contraste entre el color de fondo y el color del texto para que el contenido sea legible para todas las personas, incluidas aquellas con discapacidades visuales.

<!-- Ejemplo de buen contraste -->
<div class="bg-white text-black p-4">Texto negro sobre fondo blanco.</div>

<!-- Ejemplo de mal contraste -->
<div class="bg-gray-400 text-gray-500 p-4">Texto gris sobre fondo gris.</div>

Personalización

Tailwind CSS permite personalizar la paleta de colores mediante la directiva @theme en el archivo CSS. Esto es útil para definir colores específicos que no están incluidos en la paleta predeterminada.

@import "tailwindcss";

@theme {
  --color-custom-blue: #1e40af;
  --color-custom-green: #10b981;
}

<!-- Uso de colores personalizados -->
<div class="bg-custom-blue p-4">Este es un fondo con azul personalizado.</div>
<div class="bg-custom-green p-4">Este es un fondo con verde personalizado.</div>

Las clases de color de fondo en Tailwind CSS proporcionan una forma flexible y escalable de gestionar los colores de fondo en tus proyectos web, permitiendo una rápida implementación y fácil mantenimiento.

Clases de transparencia de Tailwind CSS

En Tailwind CSS, las clases de transparencia permiten controlar la opacidad de los elementos HTML de manera precisa y eficiente. Estas clases siguen una convención de nombres que facilita su uso y comprensión.

Las clases de transparencia se estructuran de la siguiente manera: opacity-{value}, donde {value} es un número entre 0 y 100 que representa el porcentaje de opacidad. A continuación, se detallan algunos ejemplos y su aplicación práctica:

<!-- Opacidad del 0% (elemento completamente transparente) -->
<div class="opacity-0">Este elemento es completamente transparente.</div>

<!-- Opacidad del 25% -->
<div class="opacity-25">Este elemento tiene un 25% de opacidad.</div>

<!-- Opacidad del 50% -->
<div class="opacity-50">Este elemento tiene un 50% de opacidad.</div>

<!-- Opacidad del 75% -->
<div class="opacity-75">Este elemento tiene un 75% de opacidad.</div>

<!-- Opacidad del 100% (elemento completamente opaco) -->
<div class="opacity-100">Este elemento es completamente opaco.</div>

Además de los valores estándar, Tailwind CSS 4 permite usar valores arbitrarios de opacidad directamente en las clases, sin necesidad de configuración adicional:

<!-- Valores arbitrarios de opacidad -->
<div class="opacity-[0.15]">Este elemento tiene un 15% de opacidad.</div>
<div class="opacity-[0.85]">Este elemento tiene un 85% de opacidad.</div>

La opacidad también puede ser combinada con otras clases de utilidad para crear efectos visuales complejos y dinámicos. Por ejemplo, se puede utilizar en conjunto con clases de posición, tamaño y color para diseñar componentes de interfaz de usuario avanzados.

<div class="relative w-full h-64">
  <img src="imagen.jpg" class="absolute w-full h-full opacity-50" alt="Imagen con opacidad">
  <div class="relative flex items-center justify-center w-full h-full">
    <div class="opacity-100 p-4 bg-white">Contenido superpuesto</div>
  </div>
</div>

En algunos casos, es importante considerar la accesibilidad al utilizar clases de transparencia. Elementos con baja opacidad pueden ser difíciles de ver para usuarios con discapacidades visuales. Se debe asegurar que el contenido sea legible y que haya suficiente contraste entre el texto y el fondo.

<!-- Ejemplo de buen contraste con opacidad -->
<div class="bg-black opacity-75 p-4 text-white">Texto blanco sobre fondo negro con opacidad.</div>

<!-- Ejemplo de mal contraste con opacidad -->
<div class="bg-gray-500 opacity-50 p-4 text-gray-500">Texto gris sobre fondo gris con opacidad.</div>

Las clases de transparencia de Tailwind CSS ofrecen una forma flexible y coherente de gestionar la opacidad de los elementos en proyectos web.

Paleta de colores OKLCH en Tailwind CSS 4

Tailwind CSS 4 introduce una paleta de colores modernizada basada en el espacio de color OKLCH con gama amplia P3. Este espacio de color proporciona colores más vivos y uniformes perceptualmente en pantallas compatibles, manteniendo un fallback adecuado en dispositivos con gama sRGB.

Paletas disponibles

La paleta predeterminada incluye los colores clásicos (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) junto con las paletas adicionales:

<!-- Paletas adicionales -->
<div class="bg-mauve-500 text-white p-3">Mauve</div>
<div class="bg-olive-500 text-white p-3">Olive</div>
<div class="bg-mist-500 text-white p-3">Mist</div>
<div class="bg-taupe-500 text-white p-3">Taupe</div>

Modificador de opacidad en colores

Tailwind CSS 4 permite aplicar opacidad directamente sobre los colores usando la sintaxis de barra:

<!-- Color con opacidad del 50% -->
<div class="bg-blue-500/50 p-4">Fondo azul al 50% de opacidad</div>

<!-- Texto con opacidad del 75% -->
<p class="text-gray-900/75">Texto con opacidad reducida</p>

<!-- Borde con opacidad del 30% -->
<div class="border border-red-500/30 p-4">Borde rojo semitransparente</div>

Colores personalizados con OKLCH en @theme

La directiva @theme permite definir colores personalizados usando cualquier formato CSS, incluyendo OKLCH para aprovechar la gama amplia P3:

@import "tailwindcss";

@theme {
  --color-brand-100: oklch(0.95 0.02 250);
  --color-brand-500: oklch(0.55 0.20 250);
  --color-brand-900: oklch(0.25 0.10 250);
}

Estos colores generan automáticamente utilidades como bg-brand-500, text-brand-100 y border-brand-900.