Tailwind CSS v1.7.0

¡Otro nuevo lanzamiento de Tailwind está aquí! Esta vez con soporte para gradientes, background-clip, soporte experimental para usar @apply con utilidades de variantes, y mucho más. ¡Vamos a ello!

Nuevas características

Gradientes

La gran novedad de este lanzamiento — ¡Tailwind ahora viene con soporte integrado para gradientes de fondo!

Los gradientes están diseñados con una API altamente componible que te permite especificar hasta tres paradas de color en una de las 8 direcciones por defecto:

<div class="bg-gradient-to-r from-orange-400 via-red-500 to-pink-500">
  <!-- ... -->
</div>

Esto es posible gracias a un nuevo plugin de núcleo backgroundImage (¡que puedes usar para cualquier imagen de fondo que quieras!) y un nuevo plugin de núcleo gradientColorStops.

La configuración por defecto para estos plugins se ve así:

module.exports = {
  theme: {
    backgroundImage: {
      "gradient-to-t": "linear-gradient(to top, var(--gradient-color-stops))",
      "gradient-to-tr": "linear-gradient(to top right, var(--gradient-color-stops))",
      "gradient-to-r": "linear-gradient(to right, var(--gradient-color-stops))",
      "gradient-to-br": "linear-gradient(to bottom right, var(--gradient-color-stops))",
      "gradient-to-b": "linear-gradient(to bottom, var(--gradient-color-stops))",
      "gradient-to-bl": "linear-gradient(to bottom left, var(--gradient-color-stops))",
      "gradient-to-l": "linear-gradient(to left, var(--gradient-color-stops))",
      "gradient-to-tl": "linear-gradient(to top left, var(--gradient-color-stops))",
    },
    gradientColorStops: (theme) => theme("colors"),
  },
  variants: {
    backgroundImage: ["responsive"],
    gradientColorStops: ["responsive", "hover", "focus"],
  },
};

Aprende más en el pull request original.

Nuevas utilidades background-clip

También hemos añadido un nuevo plugin de núcleo backgroundClip que puedes usar para controlar cómo se renderizan los fondos dentro de un elemento.

Incluye 4 nuevas utilidades:

Combinado con las nuevas características de gradiente, puedes usar esto para hacer cosas geniales con texto gradiente como esto:

<h1 class="text-center text-5xl font-bold">
  <span class="bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">
    Saludos desde Tailwind v1.7.
  </span>
</h1>

Solo las variantes Responsive están habilitadas para el plugin backgroundClip por defecto:

module.exports = {
  variants: {
    backgroundClip: ["responsive"],
  },
};

Nuevos alias para utilidades gap

Por alguna razón tonta llamé a las utilidades column-gap y row-gap como col-gap-{n} y row-gap-{n} respectivamente, lo cual no es terrible pero no es consistente con cómo se nombran otras cosas en Tailwind.

Me encontraba confundiéndolas todo el tiempo — ¿es row-gap el espacio en una fila, o el espacio entre filas?

Tailwind v1.7 introduce nuevas utilidades gap-x-{n} y gap-y-{n} que hacen exactamente lo mismo pero tienen nombres que no apestan. Tienen mucho más sentido que los nombres reales de CSS ahora que el gap para flexbox está empezando a implementarse también, ya que flexbox no tiene "columnas".

Estas utilidades reemplazarán a las antiguas en la v2.0, pero por ahora ambas existen juntas.

Recomendamos migrar a los nuevos nombres ahora, y deshabilitar los nombres antiguos usando esta bandera de característica:

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
  // ...
};

Tailwind emitirá una advertencia en la consola para recordarte que estás incluyendo clases descontinuadas en tu compilación hasta que habilites esta bandera.

Nueva utilidad de display contents

Hemos añadido una nueva clase contents para la reciente característica CSS display: contents.

<div class="flex">
  <div><!-- ... --></div>
  <!-- Este contenedor actuará como un contenedor fantasma, y sus hijos serán tratados como parte del contenedor flex padre -->
  <div class="contents">
    <div><!-- ... --></div>
    <div><!-- ... --></div>
  </div>
  <div><!-- ... --></div>
</div>

Aprende más sobre esto en este genial artículo de Rachel Andrew.

Letter-spacing por defecto por tamaño de fuente

Ahora puedes configurar un valor de letter-spacing por defecto para cada tamaño de fuente en tu tema tailwind.config.js, usando una sintaxis de tupla:

module.exports = {
  theme: {
    fontSize: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      // O con una altura de línea por defecto también
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    }
  }
}

Esta nueva sintaxis es soportada además de la sintaxis más simple [{fontSize}, {lineHeight}] que fue introducida recientemente.

Estilos de borde para Divide

Hemos añadido utilidades para establecer el estilo de borde en las utilidades divide:

<div class="divide-y divide-dashed">
  <div><!-- ... --></div>
  <div><!-- ... --></div>
  <div><!-- ... --></div>
  <div><!-- ... --></div>
</div>

Estas utilidades incluyen variantes responsive por defecto:

module.exports = {
  variants: {
    divideStyle: ["responsive"],
  },
};

Acceder al objeto de configuración completo desde plugins

La función config pasada a la API del plugin ahora devuelve todo el objeto de configuración cuando se invoca sin argumentos:

tailwind.plugin(function ({ config, addUtilities, /* ... */ })) {
  // Devuelve el objeto de configuración completo
  config()
})

Definir colores como closures

Puedes definir ahora tus colores como callbacks, que reciben una bolsa de parámetros que puedes usar para generar tu valor de color.

Esto es particularmente útil cuando intentas hacer que tus colores personalizados funcionen con las utilidades backgroundOpacity, textOpacity, etc.

module.exports = {
  theme: {
    colors: {
      primary: ({ opacityVariable }) => `rgba(var(--color-primary), var(${opacityVariable}, 1))`,
    },
  },
};

Actualmente lo único que se pasa es una propiedad opacityVariable, que contiene el nombre de la variable de opacidad actual (--background-opacity, --text-opacity, etc.) dependiendo de qué plugin esté usando el color.

Descontinuaciones

Tailwind v1.7 introduce un nuevo sistema de banderas de características y descontinuación diseñado para hacer las actualizaciones lo más indoloras posible.

Cada vez que descontinuemos funcionalidad o introduzcamos nuevos cambios (estables) que rompan la compatibilidad, estarán disponibles en Tailwind v1.x bajo una propiedad future en tu archivo tailwind.config.js.

Siempre que haya descontinuaciones o cambios que rompan la compatibilidad disponibles, Tailwind te advertirá en la consola en cada compilación hasta que adoptes los nuevos cambios y habilites la bandera en tu archivo de configuración:

risk - Hay próximos cambios que rompen la compatibilidad: removeDeprecatedGapUtilities
risk - Recomendamos encarecidamente optar por estos cambios ahora para simplificar la actualización de Tailwind en el futuro.
risk - https://tailwindcss.com/docs/upcoming-changes

Puedes optar por un cambio que rompa la compatibilidad estableciendo esa bandera a true en tu archivo tailwind.config.js:

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
};

Si prefieres no optar pero te gustaría silenciar la advertencia, establece explícitamente la bandera a false:

module.exports = {
  future: {
    removeDeprecatedGapUtilities: false,
  },
};

No recomendamos esto, ya que hará más difícil la actualización a Tailwind v2.0.

Utilidades gap descontinuadas

Como se mencionó anteriormente, Tailwind v1.7.0 introduce nuevas utilidades gap-x-{n} y gap-y-{n} para reemplazar las actuales utilidades col-gap-{n} y row-gap-{n}.

Por defecto ambas clases existirán, pero las utilidades antiguas serán eliminadas en Tailwind v2.0.

Para migrar a los nuevos nombres de clase, simplemente reemplaza cualquier uso existente de los nombres antiguos con los nuevos nombres:

<div class="col-gap-4 row-gap-2 ...">
<div class="gap-x-4 gap-y-2 ...">
</div>

Para optar por los nuevos nombres ahora, habilita la bandera removeDeprecatedGapUtilities en tu archivo tailwind.config.js:

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
};

Características experimentales

Tailwind v1.7.0 introduce un nuevo sistema de características experimentales que te permite optar por nueva funcionalidad que llegará a Tailwind pronto pero que aún no es completamente estable.

Es importante notar que las características experimentales pueden introducir cambios que rompan la compatibilidad, no siguen semver, y pueden cambiar en cualquier momento.

Sin embargo, si te gusta vivir al límite, puedes habilitarlas todas así:

module.exports = {
  experimental: "all",
};

Con eso aclarado, aquí hay algunas de las cosas divertidas en las que estamos trabajando y que estamos emocionados de que finalmente puedas probar...

Usar @apply con variantes y otras clases complejas

Esto es enorme — ¡finalmente puedes usar @apply con variantes Responsive, variantes de pseudo-clase y otras clases complejas!

.btn {
  @apply bg-indigo hover:bg-indigo-700 sm:text-lg;
}

Hay muchos detalles que entender con esto, así que recomiendo leer el pull request para aprender cómo funciona todo.

Esto introduce cambios que rompen la compatibilidad en cómo funcionaba @apply antes, así que asegúrate de leer todos los detalles antes de simplemente activar el interruptor.

Para habilitar esta característica, usa la bandera applyComplexClasses:

module.exports = {
  experimental: {
    applyComplexClasses: true,
  },
};

Nueva paleta de colores

Hemos añadido un adelanto de la nueva paleta de colores de Tailwind 2.0 con la que puedes empezar a jugar hoy usando la bandera uniformColorPalette:

module.exports = {
  experimental: {
    uniformColorPalette: true,
  },
};

La idea detrás de la nueva paleta es que cada color en cada tono tenga un brillo percibido similar. Así puedes intercambiar indigo-600 con blue-600 y esperar el mismo contraste de color.

Esperamos que estos colores continúen cambiando mucho a medida que iteramos sobre ellos, así que úsalos bajo tu propio riesgo.

Escala de espaciado extendida

Hemos añadido una escala de espaciado mucho más grande que incluye nuevos micro valores como 0.5, 1.5, 2.5, y 3.5, así como nuevos valores grandes como 72, 80, y 96, y hemos añadido valores fraccionarios basados en porcentajes a toda la escala de espaciado (1/2, 5/6, 7/12, etc.)

Puedes habilitar la escala de espaciado extendida usando la bandera extendedSpacingScale:

module.exports = {
  experimental: {
    extendedSpacingScale: true,
  },
};

Esto es bastante estable, me sorprendería si cambiamos esto.

Alturas de línea por defecto por tamaño de fuente por defecto

Hemos añadido alturas de línea por defecto recomendadas a cada tamaño de fuente incorporado, que se pueden habilitar usando la bandera defaultLineHeights:

module.exports = {
  experimental: {
    defaultLineHeights: true,
  },
};

Esto es un cambio que rompe la compatibilidad e impactará tus diseños, ya que anteriormente todos los tamaños de fuente tenían una altura de línea por defecto de 1.5.

Escala de tamaño de fuente extendida

Hemos añadido tres nuevos tamaños de fuente (7xl, 8xl, y 9xl) para mantenernos al día con las últimas tendencias de texto de héroe enormes. Incluyen alturas de línea por defecto también.

Puedes habilitarlos bajo la bandera extendedFontSizeScale:

module.exports = {
  experimental: {
    extendedFontSizeScale: true,
  },
};

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