Conoce todas las Novedades de Tailwind CSS v3

10 Diciembre, 2021 - 7 minutos de lectura

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.

Conoce todas las Novedades de Tailwind CSS v3

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:

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 shadow-lg text-white py-2 px-4 shadow-emerald-500/50"
>
  Emerald color
</button>

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

<button
  class="rounded bg-amber-500 shadow-lg text-white py-2 px-4 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 py-14 gap-12 snap-x overflow-x-auto">
    <div class="snap-start shrink-0 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="snap-start shrink-0 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="snap-start shrink-0 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 columnas mucho más fácil, así como las propiedades relacionadas como lo son break-after / inside / before.

<div class="columns-1 sm: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 acento y a los estados de los elementos como :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 space-x-6 items-center">
    <div class="shrink-0">
      <img
        class="rounded-full object-cover h-16 w-16"
        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="text-sm w-full text-gray-500 block file:rounded-full file:text-sm file:font-semibold file:mr-4 file:py-2 file:px-4 file:border-0 file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100"
      />
    </label>
  </div>

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

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

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

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

API Aspect Ratio

La propiedad de CSS Aspect Ratio te 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="w-full aspect-square"
    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="w-full aspect-video"
    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 subrayado de texto, el tipo de estilo del subrayado, el grosor del subrayado y 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-dotted decoration-pink-500 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-wavy decoration-indigo-500 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 Tailwind podemos 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 dispositivo podemos 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 necesitemos e incluso poder utilizar modificadores como hover:. Por ejemplo aplicando la propiedad CSS Mask Type que 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="font-bold text-3xl 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="font-bold text-clifford text-3xl 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 PurgeCSS para 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="transform scale-50 filter grayscale backdrop-filter backdrop-blur-sm"
></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-clip text-ellipsis"></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 Tailwind y 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:


Si te ha gustado este artículo, podrías invitarme a un café, te lo agradecería muchísimo.

Invítame a un café

¡Comparte este artículo!

Otras publicaciones

Mira otras publicaciones