Aplicación de variantes dark
Añada el prefijo dark:* a cualquier utilidad para aplicar un estilo diferente en el modo oscuro, incluidos colores, fondos, bordes y sombras.
Aplicación de variantes dark 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.
The dark: Prefix in Action
Once your dark mode strategy is configured, you use the dark: prefix to apply alternative styles in dark mode. Think of it as a conditional: the utility after dark: only activates when dark mode is in effect. You place both the default and dark versions on the same element, and Tailwind generates the correct CSS for both states. This keeps all style logic in one place — the HTML.
<p class="text-gray-900 dark:text-gray-100">
This text is dark on light backgrounds and light on dark backgrounds.
</p>Dark Background Colors
Background color is the most fundamental dark mode concern. Switch from light surfaces like bg-white or bg-gray-50 to dark surfaces like bg-gray-900 or bg-slate-800. Tailwind's color palette provides shades from 50 (lightest) to 950 (darkest), giving you fine-grained control over the exact tone you want in each mode.
<div class="bg-white dark:bg-gray-900 min-h-screen">
<div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
Layered surfaces for depth in both modes
</div>
</div>
</div>Dark Text Colors
Text color must maintain readability in both modes. In light mode, dark text on a light background is standard. In dark mode, use lighter text shades — typically dark:text-gray-100 for primary text, dark:text-gray-300 for secondary text, and dark:text-gray-400 for muted text. This three-level hierarchy helps maintain visual hierarchy in dark mode just as it does in light mode.
<div class="bg-white dark:bg-gray-900 p-6">
<h1 class="text-gray-900 dark:text-gray-100 text-2xl font-bold">Primary Text</h1>
<p class="text-gray-600 dark:text-gray-300 mt-2">Secondary description text.</p>
<span class="text-gray-400 dark:text-gray-500 text-sm">Muted metadata</span>
</div>Dark Border Colors
Borders often appear too prominent on dark backgrounds if left at their default color. Use dark:border-gray-700 or dark:border-gray-600 to keep borders subtle in dark mode. For decorative dividers, you might use even lighter borders like dark:border-gray-800 to create gentle separation without visual noise.
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<hr class="border-gray-100 dark:border-gray-800 my-4" />
<p class="text-gray-700 dark:text-gray-300">Content inside a bordered card</p>
</div>Dark Shadow Utilities
Shadows work differently in dark mode because dark backgrounds make traditional box shadows invisible. Use Tailwind's shadow-{color} utilities to add colored shadows, or simply reduce shadow intensity in dark mode. Alternatively, use subtle borders instead of shadows to create depth on dark surfaces — a common pattern in modern dark UIs.
<div class="
bg-white shadow-lg
dark:bg-gray-800 dark:shadow-none dark:border dark:border-gray-700
rounded-xl p-6
">
<p>Card with shadow in light, border in dark</p>
</div>Dark Variants on Interactive Elements
Buttons and links need dark mode variants for all their states: default, hover, focus, and active. Layer the dark: prefix with state variants to handle every interaction. Remember that contrast ratios must meet WCAG standards in both modes — a bright blue button that works in light mode may need a lighter shade like dark:bg-blue-400 to maintain sufficient contrast against a dark background.
<button class="
bg-blue-600 hover:bg-blue-700 text-white
dark:bg-blue-500 dark:hover:bg-blue-400
focus:outline-none focus:ring-2 focus:ring-blue-400
dark:focus:ring-blue-300
font-semibold px-5 py-2 rounded-lg transition-colors
">
Primary Button
</button>Dark Variants for SVG Icons
SVG icons styled with Tailwind's text-* utilities (which control the CSS currentColor) inherit dark variants naturally. Apply dark:text-gray-300 to an icon's wrapper or directly to the SVG element. For filled SVG icons that use fill-current or stroke-current, the same approach works because they both inherit the color property.
<svg class="w-6 h-6 text-gray-500 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>Dark Mode for Placeholder Text
Form input placeholders also need dark variants. Use the placeholder: variant together with dark: to style placeholder text in dark mode. Input backgrounds, borders, and text all need their own dark counterparts too. A consistent input style in dark mode typically uses a medium-dark background with lighter placeholder text and a subtle border.
<input
type="text"
placeholder="Search..."
class="
bg-white border-gray-300 text-gray-900
placeholder:text-gray-400
dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100
dark:placeholder:text-gray-500
rounded-lg px-4 py-2 w-full
focus:outline-none focus:ring-2 focus:ring-blue-500
"
/>Dark Variants with Opacity Modifier
You can combine the dark: prefix with Tailwind's opacity modifier syntax. For example, dark:bg-white/10 applies a white background at 10% opacity in dark mode — a useful technique for creating subtle card surfaces with a glass-like effect. This composability is one of Tailwind's most powerful features for building sophisticated dark themes.
<div class="bg-gray-100 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl p-6 backdrop-blur">
<p class="text-gray-800 dark:text-gray-200">Glassmorphism-style card</p>
</div>Avoiding Common Dark Mode Mistakes
A common mistake is applying only background dark variants without updating text and border colors — this results in dark-on-dark or light-on-light combinations. Always update all related properties together: background, text, border, and shadow. Another pitfall is using pure black (bg-black) as the dark surface — it creates harsh contrast. Prefer dark gray shades like bg-gray-900 or bg-slate-900 for a softer look.
<!-- BAD: Only background updated, text becomes invisible -->
<p class="text-gray-900 dark:bg-gray-900">Invisible text in dark mode!</p>
<!-- GOOD: Both background and text updated together -->
<p class="text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900">Readable in both modes</p>Testing Dark Mode During Development
When using the class strategy, you can test dark mode in development by manually adding the dark class to your <html> element. Browser DevTools also let you emulate prefers-color-scheme: dark regardless of your strategy. For automated testing, write tests that toggle the dark class and verify that the correct computed styles are applied to your key elements.
<!-- Quick test: add dark class to html -->
<html class="dark">
<!-- Remove to go back to light -->
<html>Quick Check
Test your understanding of applying dark variants in Tailwind CSS.
Lesson Recap
In this lesson you learned: the dark: prefix applies alternative styles when dark mode is active, backgrounds, text, borders, and shadows all need dark variants to maintain visual quality, and you can combine dark: with state variants and opacity modifiers for fine-grained control. Next up we build a JavaScript dark mode toggle that switches themes at runtime.
Preguntas frecuentes
¿La lección «Aplicación de variantes dark» es gratis?
Sí — el texto completo de «Aplicación de variantes dark» 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 «Aplicación de variantes dark»?
Añada el prefijo dark:* a cualquier utilidad para aplicar un estilo diferente en el modo oscuro, incluidos colores, fondos, bordes y sombras. 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 «Aplicación de variantes dark»?
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
- Estrategias para el modo oscuro
- Aplicación de variantes dark
- Creación de un interruptor de modo oscuro
- Modo oscuro para componentes complejos