Tailwind CSS Avanzado

Técnicas profesionales, patrones avanzados y ejemplos prácticos para dominar Tailwind CSS

1. Personalización Avanzada

Configuración Extendida

Extiende el tema de Tailwind con colores personalizados, animaciones y más.

Colores personalizados

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#a5b4fc',
          DEFAULT: '#6366f1',
          dark: '#4f46e5',
        }
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
        float: 'float 3s ease-in-out infinite',
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-10px)' },
        }
      }
    }
  }
}

Utilidades Personalizadas

Crea tus propias utilidades con directivas @layer.

Texto con sombra

Clip-path personalizado

/* En tu CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }
  .clip-path-polygon {
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  }
}

2. Patrones Avanzados de Diseño

Grid Complejo Responsivo

Crea layouts complejos que se adaptan a diferentes tamaños de pantalla.

Área principal

Este espacio ocupa 2 columnas en pantallas medianas y grandes.

Sidebar

Contenido secundario o widgets.

Altura completa

Esta tarjeta ocupa dos filas en pantallas medianas y grandes.

Tarjeta 4

Contenido adicional.

Tarjeta 5

Más contenido.

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="md:col-span-2">Área principal</div>
  <div>Sidebar</div>
  <div class="md:row-span-2">Altura completa</div>
  <div>Tarjeta 4</div>
  <div>Tarjeta 5</div>
</div>

Scroll Snap

Crea carruseles y galerías con desplazamiento preciso.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

<div class="flex overflow-x-auto scroll-snap-x space-x-4 py-4">
  <div class="flex-none w-64 h-64 scroll-snap-child">Slide 1</div>
  <div class="flex-none w-64 h-64 scroll-snap-child">Slide 2</div>
  <!-- Más slides -->
</div>

<style>
  .scroll-snap-x {
    scroll-snap-type: x mandatory;
  }
  .scroll-snap-child {
    scroll-snap-align: start;
  }
</style>

3. Efectos Avanzados

Gradientes Complejos

Crea gradientes sofisticados con múltiples puntos de parada.

Gradiente Angular

Gradiente Multicolor

<!-- Gradiente angular -->
<div class="bg-gradient-to-br from-primary via-primary-light to-white">
  <!-- Contenido -->
</div>

<!-- Gradiente multicolor -->
<div class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500">
  <!-- Contenido -->
</div>

Transformaciones 3D

Aplica efectos de perspectiva y rotación 3D.

Rotate X

Rotate Y

Perspectiva 3D

<div class="perspective-1000">
  <div class="transform rotate-y-20 transition-transform hover:rotate-y-45">
    <!-- Contenido 3D -->
  </div>
</div>

<style>
  .perspective-1000 {
    perspective: 1000px;
  }
  .rotate-x-12 {
    transform: rotateX(12deg);
  }
  .rotate-y-12 {
    transform: rotateY(12deg);
  }
</style>

4. Componentes Avanzados

Tarjeta Interactiva

Efectos de hover y focus con transformaciones y transiciones.

Imagen

Título de la Tarjeta

Descripción breve de la tarjeta con algún contenido de ejemplo.

Imagen

Tarjeta con Efecto

Pasa el cursor para ver las animaciones y transiciones.

Imagen

Otra Tarjeta

Más contenido de ejemplo para demostrar el efecto.

<div class="group relative bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
  <div class="h-48 bg-gradient-to-r from-cyan-500 to-blue-500">
    <!-- Imagen -->
  </div>
  <div class="p-6">
    <h4 class="text-lg font-semibold text-gray-800 mb-2 group-hover:text-primary">Título</h4>
    <p class="text-gray-600 mb-4">Descripción</p>
    <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors focus:ring-2 focus:ring-primary">
      Botón
    </button>
  </div>
</div>

Menú Desplegable Avanzado

Usa las utilidades de Tailwind para crear componentes interactivos sin JavaScript.

<div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="menu-button">
      Opciones
      <!-- Icono -->
    </button>
  </div>

  <!-- Menú desplegable -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100" role="menuitem">Editar</a>
      <!-- Más opciones -->
    </div>
  </div>
</div>