Color y opacidad del texto
Aplique las utilidades de color de texto de la paleta de Tailwind y ajuste la opacidad para crear jerarquía y contraste.
Color y opacidad del texto es una lección gratuita de Tailwind CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Tailwind CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Tailwind's Color System
Tailwind ships a rich color palette: 22 colors like blue, indigo, red, and green, each with 11 shades from 50 (near-white) to 950 (near-black). Plenty to work with.
<!-- Tailwind color naming: {color}-{shade} -->
<p class="text-blue-500">Blue 500</p>
<p class="text-blue-700">Blue 700 (darker)</p>
<p class="text-blue-200">Blue 200 (lighter)</p>Applying Text Color
Color text with text-{color}-{shade}. Low shades are light, mid are vivid, high are dark. text-gray-700 reads softly on white; text-gray-900 gives bold contrast.
<h1 class="text-gray-900">Main Heading</h1>
<h2 class="text-gray-700">Sub Heading</h2>
<p class="text-gray-600">Body text at a comfortable shade.</p>
<span class="text-gray-400">Metadata or secondary info</span>Brand Colors in Text
Use vivid shades for meaning: text-blue-600 for links, text-red-600 for errors, text-green-600 for success. These conventions feel instantly familiar to users.
<a href="#" class="text-blue-600 hover:text-blue-800 underline">Link</a>
<p class="text-red-600">Error: Invalid email address.</p>
<p class="text-green-600">Success: Changes saved!</p>
<p class="text-yellow-700">Warning: Disk space is low.</p>Text Opacity Modifier
Fade a color with the slash modifier: text-blue-600/50 shows blue at 50% opacity. It is cleaner than element opacity, which would dim the children too.
<p class="text-gray-900/100">Fully opaque</p>
<p class="text-gray-900/75">75% opacity</p>
<p class="text-gray-900/50">50% opacity</p>
<p class="text-gray-900/25">25% opacity</p>Color Contrast for Accessibility
For accessibility, text needs enough contrast — aim for a 4.5:1 ratio. Shade 700 on white usually passes; avoid light shades 50 to 400 as text on white.
<!-- Accessible: dark text on light background -->
<p class="bg-white text-gray-800">Good contrast ratio (passes WCAG AA)</p>
<!-- Inaccessible: light text on white background -->
<p class="bg-white text-gray-300">Poor contrast (fails WCAG)</p>Text Color on Dark Backgrounds
On dark backgrounds, flip the text light: text-white or text-gray-100 for primary, text-gray-400 for secondary. That is the heart of a clean dark theme.
<div class="bg-gray-900 p-8 rounded-xl">
<h2 class="text-white font-bold text-2xl mb-2">Dark Card</h2>
<p class="text-gray-400 text-sm">Secondary text on dark background.</p>
<a href="#" class="text-indigo-400 hover:text-indigo-300">Learn more</a>
</div>Gradient Text Effect
Make a gradient text effect with bg-gradient-to-r from-* to-* plus bg-clip-text text-transparent. The gradient shows only through the letters — very modern.
<h1 class="text-5xl font-extrabold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
Gradient Headline
</h1>Hover Color Changes
Add a hover: variant to change text color on hover — essential for links and buttons. Use transition-colors for a smooth fade, and pair it with focus:.
<a href="#"
class="text-gray-600 hover:text-indigo-600 focus:text-indigo-600 transition-colors duration-200 font-medium">
Hover or focus me
</a>Semantic Color Usage
Pick a semantic palette: one color for brand, red for danger, green for success, yellow for warnings. Used consistently, color teaches users at a glance.
<div class="space-y-2">
<p class="text-indigo-600 font-medium">Primary action</p>
<p class="text-red-600 font-medium">Danger / Error</p>
<p class="text-green-600 font-medium">Success / Confirmed</p>
<p class="text-yellow-700 font-medium">Warning / Caution</p>
<p class="text-gray-500 font-medium">Neutral / Disabled</p>
</div>Text Color in Dark Mode
Add a dark: prefix to any text color and it kicks in during dark mode. One line of HTML serves both your light and dark themes — no duplicate markup.
<p class="text-gray-900 dark:text-gray-100">
Adapts automatically between themes.
</p>
<p class="text-gray-500 dark:text-gray-400">
Secondary text adapts too.
</p>Using Arbitrary Color Values
Need a color outside the palette? Use brackets: text-[#ff5733] for an exact hex. Handy for brand colors, but use sparingly to keep your system consistent.
<!-- Arbitrary color (one-off brand match) -->
<span class="text-[#ff5733] font-bold">Brand Orange</span>
<!-- Better: define in config for reuse -->
/* tailwind.config.js theme.extend.colors.brand: '#ff5733' */
<span class="text-brand font-bold">Brand Orange</span>Quick Check
Quick check! See how color and opacity landed. 🎨
Lesson Recap
Great! text-{color}-{shade} taps the palette, the slash sets opacity without dimming children, and dark: handles dark mode. Next up: line height and spacing.
Preguntas frecuentes
¿La lección «Color y opacidad del texto» es gratis?
Sí — el texto completo de «Color y opacidad del texto» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Tailwind CSS Academy, actualiza a CoddyKit PRO. El curso de Tailwind CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Color y opacidad del texto»?
Aplique las utilidades de color de texto de la paleta de Tailwind y ajuste la opacidad para crear jerarquía y contraste. Practicas Tailwind CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Tailwind CSS Academy?
No se requiere experiencia previa. Tailwind CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Color y opacidad del texto»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Tailwind CSS Academy?
Sí. Cada lección de Tailwind CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Tamaño y grosor de fuente
- Color y opacidad del texto
- Altura de línea y espaciado entre letras
- Alineación y decoración del texto