Tailwind Text & Background Color

Tailwind CSS 3 ofrece clases utilitarias para manejar colores de fondo y texto de manera rápida y eficiente.

Tailwind CSS 3 ofrece clases utilitarias para manejar colores de fondo y texto de manera rápida y eficiente.

Background Color (bg-{color}-{shade})

• Clases: bg-{color}-{shade}. Ejemplo: bg-blue-500 para un fondo azul con intensidad 500.
• Colores predefinidos: Colores como gray, red, blue, etc., con tonos del 100 al 900.
• Personalización: Puedes definir colores personalizados en tailwind.config.js.

Text Color (text-{color}-{shade})

• Clases: text-{color}-{shade}. Ejemplo: text-gray-700 para texto gris con intensidad 700.
• Colores predefinidos: Igual que los colores de fondo.
• Personalización: Al igual que los colores de fondo, puedes definir colores personalizados.

Ejemplo práctico

<div class="bg-gray-800 p-6">
  <h1 class="text-white text-3xl">Título</h1>
  <p class="text-gray-300">Texto en gris claro sobre fondo gris oscuro.</p>
  <button class="bg-blue-500 text-white px-4 py-2 rounded">Botón azul</button>
</div>

• bg-gray-800: Fondo gris oscuro.
• text-white: Texto blanco.
• bg-blue-500: Fondo azul para el botón.

Estas clases facilitan la aplicación de colores consistentes y permiten personalizar la paleta para adaptarse a las necesidades del proyecto.