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 columnas mucho 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 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 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>Mujerspan>
    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>Hombrespan>
    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>Otrospan>
    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 notificacionesspan>
  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="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 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 elitspan
  >, 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 veniamspan
  >, 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 proidentspan
  >, 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