Tailwind CSS 2.0 ya está disponible

Probablemente, Tailwind es el framework de CSS (con el permiso de Bootstrap) más popular entre los desarrolladores y diseñadores. Tan sólo lleva 18 meses entre nosotros, pero su éxito es más que merecido. Y es que permite configurar la apariencia de un sitio web de manera rápida, sencilla y completamente responsive, aprovechando las clases predefinidas que nos ofrece. La nueva versión de Tailwind CSS 2.0 ya está disponible y, a continuación, señalaremos cuáles son los principales cambios y mejoras introducidos.

En el anuncio del lanzamiento de la nueva versión, Adam Wathan, creador del framework, comentó algunas novedades a modo de resumen antes de profundizar más en el tema: “Aunque Tailwind CSS v2.0 es una nueva versión principal, hemos trabajado muy duro para minimizar los cambios importantes, especialmente los que le obligarían a editar toneladas de sus plantillas. Hemos cambiado el nombre de dos clases, hemos eliminado tres que ya no son relevantes en los navegadores modernos y hemos reemplazado dos con alternativas más potentes. Cualquier otro cambio importante que pueda afectarlo puede remediarse con un par de pequeñas adiciones a su archivo tailwind.config.js. La actualización no debería tardar más de unos 30 minutos”.

Nueva paleta de colores: se ha ampliado el número de colores de la nueva paleta a un total de 22, mejorando ampliamente con respecto a la versión anterior que sólo incluía 10. Además, ahora cada color cuenta con 10 tonos distintos para elegir, disponiendo de una totalidad de 220 colores. Para hacernos una idea: sólo para el color gris, hay 5 tonalidades distintas, por lo que se podrá escoger entre grises más azulados o más cálidos.

Como indican en el comunicado oficial, para poder usar todos los colores disponibles, debemos importar la paleta completa desde “tailwindcss/colors” al principio de nuestro archivo de configuración

Modo oscuro: sólo será necesario agregar ‘dark’ al inicio de una clase determinada para habilitar el cambio cuando el modo oscuro esté activado. También funciona con ‘hover’ y elementos responsive.

<div class="bg-white dark:bg-black">
  <h1 class="text-gray-900 dark:text-white">Dark mode</h1>
  <p class="text-gray-500 dark:text-gray-300">
    The feature you've all been waiting for.
  </p>
</div>

Breakpoint extra ancho 2XL: un breakpoint es el ancho de un dispositivo en el cual queremos mostrar nuestro contenido CSS. Esto está directamente relacionado con el diseño responsive, ya que la página web se mostrará de forma distinta si se abre en un ordenador, móvil o tablet. En la nueva versión, se ha agregado una opción ‘2xl’ para tamaños de 1536 píxeles o superiores.

<h1 class="... 2xl:text-9xl">Godzilla</h1>

Distancia entre líneas de texto predeterminadas según el tamaño de la fuente: cada tamaño de fuente ahora está emparejado con un interlineado por defecto.

// Tailwind's default theme
module.exports = {
  theme: {
    // ...
    fontSize: {
      xs: ['0.75rem', { lineHeight: '1rem' }],
      sm: ['0.875rem', { lineHeight: '1.25rem' }],
      base: ['1rem', { lineHeight: '1.5rem' }],
      lg: ['1.125rem', { lineHeight: '1.75rem' }],
      xl: ['1.25rem', { lineHeight: '1.75rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
      '5xl': ['3rem', { lineHeight: '1' }],
      '6xl': ['3.75rem', { lineHeight: '1' }],
      '7xl': ['4.5rem', { lineHeight: '1' }],
      '8xl': ['6rem', { lineHeight: '1' }],
      '9xl': ['8rem', { lineHeight: '1' }],
    },
  },
}

Nuevos estilos de formulario fáciles de utilizar: en este punto, Adam Wathan comenta que le parece increíble que haya tan pocas quejas relacionadas con el diseño de los formularios con Tailwind CSS: “Una cosa que me sorprende constantemente es que pocas personas se quejan de lo increíblemente inútiles que son los elementos de formulario listos para usar con Tailwind. Literalmente se ven horribles y no puede hacer nada al respecto sin escribir CSS personalizado lleno de extraños trucos SVG de imagen de fondo y preocuparse por casos extremos oscuros que requieren propiedades CSS de las que nunca antes había oído hablar ‘color-adjust’.”

Para solucionar esta “horrible” estética, han lanzado un nuevo complemento oficial llamado @tailwindcss/forms que normaliza y restablece todos los controles de formulario básicos en los navegadores a un estado en el que es más fácil diseñar mediante clases de utilidad. Esta opción se encuentra desactivada por defecto, pero puede habilitarse en ‘tailwind.config.js con una sola línea.

// tailwind.config.js
module.exports = {
  // ...
  plugins: [require('@tailwindcss/forms')],
}

Espaciado extendido, tipografía y escalas de opacidad: han ampliado el rango de espaciado predeterminada para incluir nuevos valores. También han aumentado la escala de la tipografía por defecto con los nuevos valores 7xl, 8xl y 9xl. En cuanto a la opacidad, se utilizan valores múltiplos de 10 por defecto, pero también se pueden usar valores múltiplos de 5, comprendiendo un rango entre 0 y 100.

Usa @apply para cualquier cosa: ahora literalmente se puede usar la directiva ‘@apply’ para casi todo, incluyendo elementos responsive, hover, focus y muchos más.

.btn {
  @apply bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50;
}

Nuevas utilidades de desbordamiento de texto: antes de Tailwind CSS 2.0, sólo se nos ofrecía la alternativa de utilizar ‘truncate’ para evitar el desbordamiento de texto, sin embargo, esta nueva versión incluye más opciones relacionadas con esta cuestión. Se han agregado ‘overflow-ellipsis’ y ‘overflow-clip’ para controlar las propiedades de ‘text-overflow’.

<p class="overflow-ellipsis overflow-hidden">
  Look ma no whitespace-nowrap ipsum...
</p>

Group-hover y focus-within por defecto: para Adam Wathan, ‘group-hover’ y ‘focus-within’ no son sólo útiles, también son imprescindibles. Cualquier lugar donde se habiliten ‘hover’ o ‘focus’ por defecto previamente, ahora también usarán ‘group-hover’ y ‘focus-within’ de manera predeterminada.

<div class="group ...">
  <span class="group-hover:text-blue-600 ...">Da ba dee da ba daa</span>
</div>

Duración de transición predeterminada: a la hora de agregar cualquier transición, era necesario incluir 3 clases, pero esto se ha simplificado en la nueva versión. Ahora es posible especificar una función predeterminada de duración (‘duration’) y sincronización (‘timing’) que se usará automáticamente cada vez que se añada cualquier propiedad de transición (‘transitionProperty’).

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    // ...
    transitionDuration: {
      DEFAULT: '150ms',
      // ...
    },
    transitionTimingFunction: {
      DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
      // ...
    },
  },
}

De esta manera, sólo será necesario escribir una sola clase, si usas una función común de duración y sincronización de manera frecuente.

<button class="... transition">Count them again</button>

Incompatibilidad con Internet Explorer 11: actualmente, la nueva versión no funciona en Internet Explorer 11, pero si es necesario, se puede usar la versión Tailwind CSS 1.9 que sí es compatible con el navegador.

Estos son, a grandes rasgos, las principales nuevas características de Tailwind CSS 2.0, pero hay muchas más. Si deseas conocerlas todas, puedes obtener más información en su página oficial.

Imagen de Pankaj Patel en Unsplash