Sombras de Tailwind CSS

En el diseño web moderno, los efectos de sombra son una herramienta importante para crear jerarquía visual y sensación de profundidad.

Tailwind CSS ofrece un conjunto de clases de utilidad de sombras potente y flexible que permite implementar fácilmente diversos efectos de sombra.

Este artículo presenta de forma integral el sistema de sombras de Tailwind CSS, incluyendo box-shadow (sombra de caja), text-shadow (sombra de texto), el control del color y la opacidad de las sombras, así como la aplicación de efectos de sombra interior.

¿Qué son las sombras CSS?

Antes de profundizar en la implementación específica de Tailwind, primero comprendamos los conceptos básicos de las sombras CSS.

Las sombras CSS se dividen principalmente en dos tipos:

  1. Sombra de caja (box-shadow): se aplica a todo el modelo de caja del elemento
  2. Sombra de texto (text-shadow): se aplica solo al contenido de texto del elemento

Los efectos de sombra pueden:

  • Mejorar la jerarquía visual de los elementos
  • Crear efectos de "flotación"
  • Simular iluminación y profundidad
  • Resaltar contenido importante

box-shadow en Tailwind

Tailwind proporciona una serie de clases de utilidad de box-shadow predefinidas, divididas en 6 niveles, desde sutiles hasta intensos:

Ejemplo

<div class="shadow-sm">Sombra pequeña</div>
<div class="shadow">Sombra predeterminada</div>
<div class="shadow-md">Sombra mediana</div>
<div class="shadow-lg">Sombra grande</div>
<div class="shadow-xl">Sombra extra grande</div>
<div class="shadow-2xl">Sombra extra extra grande</div>

Pruébalo »

Tabla comparativa de niveles de sombra

Nombre de clase Descripción Caso de uso
shadow-sm Sombra muy sutil Hover de botones, elevación ligera
shadow Sombra predeterminada (tamaño mediano) Tarjetas, elementos comunes
shadow-md Sombra mediana Modales, notificaciones importantes
shadow-lg Sombra grande Paneles flotantes, elementos destacados
shadow-xl Sombra extra grande Elementos con énfasis especial
shadow-2xl Sombra extra extra grande Elementos que necesitan destacarse muy claramente

Ejemplos de código y práctica

Ejemplo

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md">
  <div class="text-xl font-medium text-black">Ejemplo de sombras en Tailwind</div>
  <p class="text-gray-500">Este es un ejemplo de tarjeta que usa shadow-md</p>
</div>

Pruébalo »

Explicación del efecto：

  • Se creó una tarjeta con fondo blanco
  • Se usóshadow-mdla clase para agregar sombra mediana
  • Combinado con bordes redondeados (rounded-xl) para que el efecto de sombra sea más natural

text-shadow en Tailwind

Tailwind no incluye clases de utilidad de text-shadow de forma predeterminada, pero se pueden agregar de las siguientes maneras:

Método 1: Usar un plugin

Instalartailwindcss-textshadowplugin:

Ejemplo

npm install tailwindcss-textshadow

Luego, entailwind.config.jsconfigura:

Ejemplo

module.exports = {
  plugins: [
    require('tailwindcss-textshadow')
  ],
  theme: {
    textShadow: {
      'sm': '1px 1px 2px rgba(0, 0, 0, 0.5)',
      'DEFAULT': '2px 2px 4px rgba(0, 0, 0, 0.5)',
      'lg': '4px 4px 8px rgba(0, 0, 0, 0.5)',
    }
  }
}

Ejemplo de uso:

Ejemplo

<h1 class="text-shadow-lg">Título con sombra</h1>

Método 2: Clases de utilidad personalizadas

Agrega en CSS:

Ejemplo

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
  .text-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }
}

Control de color y opacidad de sombras

Tailwind te permite controlar el color y la opacidad de las sombras mediante combinaciones de clases de utilidad.

1. Usar clases de utilidad de color de sombra

Ejemplo

<div class="shadow-lg shadow-blue-500/50">Sombra azul semitransparente</div>

Análisis de sintaxis:

  • shadow-{color}: establece el color de la sombra (por ejemplo, blue-500)
  • /{opacity}: establece la opacidad de la sombra (por ejemplo, 50 indica 50%)

2. Colores y opacidades disponibles

Tailwind admite todos los colores integrados y cualquier valor de opacidad:

Ejemplo

<div class="shadow-lg shadow-red-400/30">Sombra roja semitransparente</div>
<div class="shadow-lg shadow-emerald-300/80">Sombra intensa verde esmeralda</div>
<div class="shadow-lg shadow-purple-600/20">Sombra púrpura suave</div>

3. Personalizar el color de las sombras

Entailwind.config.jsextiende en:

Ejemplo

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'custom': '0 4px 6px -1px rgba(156, 39, 176, 0.3)',
      }
    }
  }
}

Efecto de sombra interior (inset)

La sombra interior puede crear un efecto de hundimiento o presión, y se usa comúnmente en elementos interactivos como botones y campos de entrada.

1. Usar clases de sombra interior predefinidas

Ejemplo

<div class="shadow-inner">Efecto de sombra interior</div>

2. Personalizar sombras interiores

Agrega en el archivo de configuración:

Ejemplo

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'inner-lg': 'inset 0 4px 6px 0 rgba(0, 0, 0, 0.1)',
      }
    }
  }
}

3. Ejemplo de aplicación práctica

Ejemplo

<button class="px-4 py-2 bg-gray-100 rounded-lg shadow-inner hover:shadow-inner-lg">
Botón de clic
</button>

Explicación del efecto：

  • El estado predeterminado tiene una sombra interior ligera
  • Al pasar el cursor, la sombra interior se intensifica (hover:shadow-inner-lg)
  • se crea el efecto visual de que el botón se presiona

Técnicas avanzadas y mejores prácticas

1. Combinar sombras exteriores e interiores

Ejemplo

<div class="shadow-lg shadow-inner">Combinación de sombra exterior + sombra interior</div>

2. Sombras responsivas

Ejemplo

<div class="shadow-sm md:shadow-lg">Pantallas pequeñas con sombra pequeña, pantallas grandes con sombra grande</div>

3. Estados de hover y foco

Ejemplo

<button class="shadow hover:shadow-lg focus:shadow-outline">
Botón interactivo
</button>

4. Animaciones de sombra

Ejemplo

<button class="shadow-md hover:shadow-xl transition-shadow duration-300">
Botón con efecto de transición
</button>

Desafíos de práctica

  1. Crea un componente de tarjeta que tenga una sombra mediana por defecto y que al pasar el cursor la sombra se haga más grande y cambie de color
  2. Diseña un campo de entrada con sombra interior que desaparezca al recibir el foco
  3. Implementa un título de texto que utilice text-shadow para crear un efecto de neón
  4. Combina sombras exteriores e interiores para crear un botón con efecto tridimensional

Resumen de puntos clave

Tabla de referencia rápida de clases de utilidad principales

Función Ejemplo de clase Descripción
Sombra de caja shadow, shadow-lg Sombras exteriores de diferentes tamaños
Sombra interior shadow-inner Sombra dentro del elemento
Color de sombra shadow-blue-500 Establece el color de la sombra
Opacidad de sombra shadow-blue-500/50 Establece la opacidad de la sombra
Sombra de texto text-shadow (requiere personalización) Agrega sombra al texto

Recomendaciones de mejores prácticas

  1. Uso moderado: las sombras deben realzar el diseño, no distraer la atención
  2. Mantén la consistencia: mantén niveles de sombra similares en todo el proyecto
  3. Considera el rendimiento: demasiadas sombras complejas pueden afectar el rendimiento de renderizado
  4. Combina con otras propiedades: las sombras funcionan mejor cuando se combinan con bordes redondeados y efectos de transición
Otras extensiones