Tailwind CSS v1.6.0

¡Es como Tailwind CSS v1.5 excepto que ahora hay soporte para animaciones, utilidades de overscroll y más!

Se supone que no hay cambios que rompan la compatibilidad aquí, pero pensé lo mismo la última vez. Si rompí algo, la primera persona en reportarlo se lleva una camiseta de Tailwind.

Nuevas características

Soporte de animación

Tailwind CSS v1.6 añade un nuevo plugin de núcleo animation, con 4 animaciones de propósito general incluidas por defecto:

• animate-spin
• animate-ping
• animate-pulse
• animate-bounce

<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="mr-3 h-5 w-5 animate-spin ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Procesando
</button>

Estas son completamente personalizables como siempre, usando las secciones animation y keyframes de tu tema tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      animation: {
        wiggle: "wiggle 1s ease-in-out infinite",
      },
      keyframes: {
        wiggle: {
          "0%, 100%": { transform: "rotate(-3deg)" },
          "50%": { transform: "rotate(3deg)" },
        },
      },
    },
  },
};

Para más información y una demo en vivo, lee la nueva documentación de animación. Para detalles detrás de escena sobre la justificación del diseño, consulta el pull request.

Nuevas variantes prefers-reduced-motion

Para acompañar las nuevas características de animación, también hemos añadido nuevas variantes motion-safe y motion-reduce que te permiten aplicar CSS condicionalmente basado en la media feature prefers-reduced-motion.

Pueden ser útiles en conjunto con las utilidades de transición y animación para desactivar el movimiento problemático para los usuarios que son sensibles a él:

<div class="transition duration-150 ease-in-out motion-reduce:transition-none ... ..."></div>

...o para optar explícitamente por el movimiento para asegurarse de que solo se muestra a los usuarios que no lo han desactivado:

<div class="duration-150 ease-in-out motion-safe:transition ... ..."></div>

Estas también se pueden combinar con variantes Responsive y variantes de pseudo-clase:

<!-- Con variantes Responsive -->
<div class="sm:motion-reduce:translate-y-0"></div>
<!-- Con variantes de pseudo-clase -->
<div class="motion-reduce:hover:translate-y-0"></div>
<!-- Con variantes Responsive y de pseudo-clase -->
<div class="sm:motion-reduce:hover:translate-y-0"></div>

Actualmente no están habilitadas para ninguna utilidad por defecto, pero puedes habilitarlas según sea necesario en la sección variants de tu archivo tailwind.config.js:

module.exports = {
  // ...
  variants: {
    translate: ["responsive", "hover", "focus", "motion-safe", "motion-reduce"],
  },
};

Para más detalles, consulta la documentación actualizada de variantes.

Nuevas utilidades overscroll-behavior

También hemos añadido nuevas utilidades para la propiedad overscroll-behavior.

Puedes usar estas utilidades para controlar cómo funciona el "scroll chaining" en tus sitios, y evitar desplazar toda la página cuando llegues a la parte superior o inferior de un área desplazable incrustada.

<div class="overscroll-y-contain ...">
  <!-- ... -->
</div>

Ten en cuenta que esto actualmente no es soportado en Safari, pero en mi opinión no es un gran problema tratar esto como una mejora progresiva de todos modos, ya que retrocede con bastante gracia.

Este plugin se puede configurar en tu archivo tailwind.config.js como overscrollBehavior:

module.exports = {
  // ...
  // Deshabilitando el plugin
  corePlugins: {
    overscrollBehavior: false,
  },
  // Personalizando las variantes habilitadas
  variants: {
    overscrollBehavior: ["responsive", "hover"],
  },
};

Genera tu CSS sin un archivo de entrada

Si nunca escribes CSS personalizado y estás harto de crear este archivo todo el tiempo...

@tailwind base;
@tailwind components;
@tailwind utilities;

...entonces tengo noticias para ti, bebé — si estás usando nuestra herramienta CLI tailwindcss, puedes empezar a depositar esos 58 caracteres en tu cuenta de ahorros en lugar de desperdiciarlos en un archivo CSS inútil.

El argumento del archivo de entrada ahora es opcional en la herramienta CLI, así que si realmente no necesitas un archivo CSS personalizado, puedes simplemente escribir esto:

npx tailwindcss build -o compiled.css

Tus hijos estarán muy agradecidos por el tiempo extra que pasarás con ellos.

¿Quieres hablar sobre esta publicación? Discútelo en GitHub →