Conoce todas las Novedades de Tailwind CSS v3

Tailwind CSS poco a poco se ha convertido en el framework CSS preferido por muchos desarrolladores web, ya que tiene muchas ventajas con respecto a las demás alternativas. Características como ser agnóstico al diseño por lo que puedes crear cualquier tipo de interfaz sin importar la guía de estilo preestablecida, fácil incorporación de temas oscuros, altamente personalizable y muchas otras cualidades que lo hacen un gran framework para el desarrollo web moderno y si no lo conoces, deberías darle una oportunidad y tal vez (o seguramente) quieras utilizarlo para tus proyectos futuros.

Hace pocas horas se lanzó la tercera versión estable, después de haber estado poco más de 2 meses desarrollándose en la versión alpha, ya podemos usar todas las novedades:

• Just-in-Time mejorado
• Sombras de colores
• Se añadió soporte a la API Scroll Snap
• Ahora podemos utilizar múltiples columnas
• Estilos nativos para estilizar formularios
• API Aspect Ratio
• Estilos de subrayados elegantes
• Modificadores RTL y LTR
• Modificadores para orientación horizontal (landscape) y vertical (portrait)
• Propiedades arbitrarias
• Una CDN con la que puedes implementar fácilmente Tailwind CSS

Para instalar Tailwind CSS y empezar a utilizarlo debes de empezar o tener un proyecto de Node.js, e instalarlo o actualizarlo con el siguiente comando:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Just-in-Time mejorado

En la versión de Tailwind CSS v2.1, se incluía por defecto el modo Just-in-Time (JIT), con el que se mejoraba drácticamente el tiempo de desarrollo, ya que se generan todas las clases CSS bajo demanda. Pero en esta versión 3.0 se ha mejorado para obtener velocidades aún más rápidas que con el antiguo motor y además viene activado por defecto.

Gracias a esta nueva versión de JIT, todos los colores vienen activados por defecto por lo que puedes utilizar toda la paleta de colores que ofrece Tailwind CSS.

Sombras de colores

Antes de la tercera versión, solamente se podían utilizar las típicas sombras de color negro, ahora es posible utilizar cualquier color de la paleta o incluso agregar colores personalizados para crear sombras de colores en Tailwind.

<button
  class="rounded bg-emerald-500 px-4 py-2 text-white shadow-lg shadow-emerald-500/50"
>
  Emerald color
</button>

<button
  class="rounded bg-blue-500 px-4 py-2 text-white shadow-lg shadow-blue-500/50"
>
  Blue color
</button>

<button
  class="rounded bg-amber-500 px-4 py-2 text-white shadow-lg shadow-amber-500/50"
>
  Amber color
</button>

API Scroll Snap

La API CSS Scroll Snap, es un módulo de CSS que permite controlar la forma en que los elementos hijos que sobresalen de un contenedor y provocan el scroll (ya sea horizontal o vertical), se comportan dentro de este. Ahora podemos usarlo fácilmente con Tailwind con las propiedades Scroll Margin.

<div class="max-w-md">
  <div class="flex w-full snap-x gap-12 overflow-x-auto py-14">
    <div class="shrink-0 snap-start first:pl-6">
      <img
        src="https://images.pexels.com/photos/3470481/pexels-photo-3470481.jpeg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div class="shrink-0 snap-start first:pl-6">
      <img
        src="https://images.pexels.com/photos/3470872/pexels-photo-3470872.jpeg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
    <div class="shrink-0 snap-start first:pl-6">
      <img
        src="https://images.pexels.com/photos/995939/pexels-photo-995939.jpeg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80"
      />
    </div>
  </div>
</div>

Múltiples columnas

Si bien desde que apareció la especificación de CSS 3 podíamos usar múltiples columnas, es hasta esta versión que se han añadido a Tailwind las propiedas de CSS para crear columnasmucho más fácil, así como las propiedades relacionadas como lo son break-after / inside / before.

<div class="columns-1 xs:columns-3">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Estilizar formularios

Gracias a los colores de acentoy a los estados de los elementoscomo :hover, :focus, :active. Ahora es mucho más fácil personalizar elementos de formularios como radio buttons, checkboxs e inputs de tipo file utilizando el modificador file:para este último.

<form>
  <div class="flex items-center space-x-6">
    <div class="shrink-0">
      <img
        class="h-16 w-16 rounded-full object-cover"
        src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80"
        alt="Foto de perfil"
      />
    </div>

    <label class="block">
      <input
        type="file"
        class="block w-full text-sm text-gray-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100"
      />
    </label>
  </div>

  <div class="flex justify-evenly">
    <label
      class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600"
    >
      <input type="radio" class="accent-violet-500" name="gender" checked />
      <span>Mujer</span>
    </label>

    <label
      class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600"
    >
      <input type="radio" class="accent-violet-500" name="gender" />
      <span>Hombre</span>
    </label>

    <label
      class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600"
    >
      <input type="radio" class="accent-violet-500" name="gender" />
      <span>Otro</span>
    </label>
  </div>

  <label
    class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600"
  >
    <input type="checkbox" class="accent-violet-500" checked />
    <span>Activar notificaciones</span>
  </label>
</form>

API Aspect Ratio

La propiedad de CSS Aspect Ratiote permite establecer la relación de aspecto de imágenes, videos, iframe y cualquier otro elemento. Gracias a que esta propiedad está siendo soportada por todos los navegadores modernos, la API Aspect Ratio fue incluída en Tailwind.

<div class="max-w-lg">
  <img
    class="aspect-square w-full"
    src="https://images.pexels.com/photos/3470481/pexels-photo-3470481.jpeg?auto=compress&cs=tinysrgb&w=760"
  />
</div>

<div class="max-w-lg">
  <img
    class="aspect-video w-full"
    src="https://images.pexels.com/photos/3470481/pexels-photo-3470481.jpeg?auto=compress&cs=tinysrgb&w=760"
  />
</div>

Subrayados elegantes

Ahora podemos cambiar el color del subrayadode texto, el tipo de estilo del subrayado, el grosor del subrayadoy la distancia de desplazamiento del subrayado.

<p>
  Lorem ipsum dolor sit amet,
  <span
    class="font-semibold text-gray-900 underline decoration-sky-500 decoration-2"
    >consectetur adipiscing elit</span
  >, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <span
    class="font-semibold text-gray-900 underline decoration-pink-500 decoration-dotted decoration-2"
    >Ut enim ad minim veniam</span
  >, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.
  <span
    class="font-semibold text-gray-900 underline decoration-indigo-500 decoration-wavy decoration-2"
    >Excepteur sint occaecat cupidatat non proident</span
  >, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Modificadores RTL y LTR

RTL es el acrónimo en inglés de Right to Left y LTR es el acrónimo de Left to Right, que son los patrones de visualización y lectura del contenido que podemos establecer en un sitio web. La dirección RTL es la que se usa en el dialecto árabe.

Es por eso, que es importante indicar la dirección de lectura de nuestra página web, a través los modificadores rtl: y ltr: de Tailwindpodemos darle a un elemento en específico la dirección de lectura que necesitemos.

Modificadores de orientación

En el siguiente ejemplo, dependiendo de la orientación del dispositivopodemos ocultar cualquier elemento.

<div>
  <div class="portrait:hidden">
    <p>....</p>
  </div>
  <div class="landscape:hidden">
    <p>...</p>
  </div>
</div>

Propiedades arbitrarias

Si quieres usar alguna propiedad CSS que no está incluída en Tailwind, utilizando la sintaxis de corchetes podemos agregar las propiedades CSS que necesitemose incluso poder utilizar modificadores como hover:. Por ejemplo aplicando la propiedad CSS Mask Typeque no está soportada en Tailwind CSS.

<div class="[mask-type:luminance]">...</div>

También podamos hacer cosas como esta:

<div class="[display:none]">...</div>

Aunque ya existe la clase hidden para ese próposito, pero sin duda alguna ésta es la novedad más interezante y poderoza de todas.

CDN Tailwind CSS

A través de una librería de JavaScript, podemos incluir y dar estilos a nuestro sitio web con Tailwind y utilizar todas las propiedades sin necesidad de realizar ninguna compilación. Aunque solamente se recomienda usar en desarrollo para realizar pruebas y nunca la debes utilizar en producción, por razones de rendimiento.

¿Cómo empezar a utilizar la CDN?

Agrega una etiqueta <script> a tu archivo HTML de la siguiente manera:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">¡Hola mundo!</h1>
  </body>
</html>

Configurando las opciones

Utilizando otra etiqueta <script>, podemos configurar el objeto tailwind.config = {} para añadir las propiedades o configuraciones personalizadas que necesitemos.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              clifford: '#da373d'
            }
          }
        }
      }
    </script>
  </head>
  <body>
    <h1 class="text-clifford text-3xl font-bold underline">¡Hola mundo!</h1>
  </body>
</html>

Añadir CSS personalizado

Para añadir CSS personalizado e incluirso en el proceso de compilación de Tailwind, podemos hacerlo haciendo uso de una etiqueta <style> con el atributo type="text/tailwindcss".

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
      }
    </style>
  </head>
  <body>
    <div class="lg:content-auto">
      <!-- ... -->
    </div>
  </body>
</html>

Otros cambios

Configurar archivos fuentes

Tailwind ya no usa PurgeCSSpara eliminar todos los estilos que no necesitamos, es por eso que han cambiado la opción purge por content. Aunque anteriormente era una opción opcional, ahora se recomienda incluirla para indicar explícitamente los archivos fuentes para nuestros estilos.

module.exports = {
  content: [
    // Ejemplo de rutas...
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}'
  ]
}

Modo oscuro por defecto

La opción darkMode, ahora utiliza por defecto el valor media, es por eso que al crear la configuración por defecto de Tailwind CSS con el comando:

npx tailwindcss init

Esta ya no viene establecida.

Propiedad variants eliminada

A partir de esta versión todas las utilidades de Tailwind disponen de manera predeterminada todas las variantes como :hover, :focus, :active, etc. Es por eso que ya no necesitamos usar la propiedad variants en el archivo de configuración.

module.exports = {
  variants: {
    extend: {
      padding: ['hover']
    }
  }
}

Transformaciones y filtros automáticos

En Tailwind CSS v3 ahora podemos utilizar transformaciones y filtros sin la necesidad de añadir las clases transform, filter o backdrop-filter.

<div
  class="scale-50 transform grayscale filter backdrop-blur-sm backdrop-filter"
></div>
<div class="scale-50 grayscale backdrop-blur-sm"></div>

Cambios en los nombres de algunas clases

Los nombres de algunas clases de Tailwind CSS v3 se han cambiado para evitar colisiones con otros nombres, también se dejó la retrocompatibilidad por lo que si tienes los antiguos nombres no se verán afectadas, pero es altamente recomendable que actualices a los nuevos nombres.

overflow-clip/ellipsis se cambió a text-clip/ellipsis

<div class="overflow-clip overflow-ellipsis"></div>
<div class="text-ellipsis text-clip"></div>

flex-grow/shrink ahora solo son grow y shrink

<div class="flex-shrink flex-grow-0">
  <div>
    <div class="shrink grow-0"></div>
  </div>
</div>

decoration-clone/slice se renombró a box-decoration-clone/slice

<div class="decoration-clone"></div>
<div class="box-decoration-clone"></div>

<div class="decoration-slice"></div>
<div class="box-decoration-slice"></div>

Si quieres conocer todos los cambios puedes consultarlos en esta guía de actualización de Tailwind CSS v3.

Desde que conocí Tailwind CSS llamó mucho mi atención por lo que comencé a darle una oportunidad, y poco a poco se convirtió en mi framework CSS preferido o el que más usaba. Ya que nos ahorra mucho tiempo para desarrollar un sitio web y por su alto nivel de personalización se adapta fácilmente a cualquier estilo que necesitemos aplicar en una página web, además comparada con otras alternativas (Bootstrap, Bulma, MaterializeCSS, Semantic UI, etc), otra ventaja que a mi parecer es importante, es que podemos utilizar clases CSS modernas para construir layouts o componentes y aunque es un poco extraño agregar muchas clases para un solo elemento, puedes configurar tus propias clases con los estilos de Tailwindy aplicar tu métodología preferida como BEM, SUIT CSS, SMACSS, etc, o seguir tu propia convención para nombrar clases, aunque esto se aleja de la principal filosofía de Tailwind debes recodar que debes implementar las herramientas que mejor se ajusten a tu proceso de trabajo.

Si no conocías Tailwind empieza a utilizarla para optimizar casi drásticamente tu proceso y tiempo de desarrollo y si ya conocías la librería deberías empezar a utilizar todas estas y muchas más funcionalidades.

Referencias:

• https://tailwindcss.com/blog/tailwindcss-v3
• https://tailwindcss.com/docs/installation/play-cdn
• https://tailwindcss.com/docs/upgrade-guide