Tailwind CSS v3.0

Tailwind CSS v3.0 ya está aquí — trayendo increíbles ganancias de rendimiento, enormes mejoras en el flujo de trabajo y un número seriamente ridículo de nuevas características.

Para un recorrido por algunas de las características nuevas más geniales, echa un vistazo al video "Novedades en Tailwind CSS v3.0" en nuestro canal de YouTube channel.

Tailwind CSS v3.0 tiene que ser nuestro lanzamiento más emocionante hasta la fecha, incluyendo mejoras como:

• Just-in-Time, todo el tiempo — tiempos de compilación ultrarrápidos, variantes apilables, soporte para valores arbitrarios, mejor rendimiento del navegador y más.
• Todos los colores listos para usar — incluyendo todos los colores de la paleta extendida como cyan, rose, fuchsia y lime, y cincuenta sombras de ~~grey~~ gray.
• Sombras de caja coloreadas — para efectos divertidos de brillo y reflejo, y sombras más naturales en fondos coloreados.
• API de Scroll snap — un conjunto completo y componible de utilidades para scroll snapping solo con CSS.
• Layout Multi-columna — para que finalmente puedas construir ese periódico en línea con el que has estado soñando.
• Estilizado de controles de formulario nativos — haz que checkboxes, radio buttons y entradas de archivo coincidan con tu marca sin reinventar la rueda.
• Modificador de impresión — controla cómo se ve tu sitio cuando alguien lo imprime, directamente desde tu HTML.
• API moderna de aspect ratio — no más trucos de padding, bueno, a menos que necesites soportar Safari 14, lo cual probablemente hagas, pero aún así.
• Estilos de subrayado elegantes — la pieza faltante para hacer que ese proyecto paralelo tuyo finalmente despegue.
• Modificadores RTL y LTR — para un control completo al construir sitios web multidireccionales.
• Modificadores Portrait y landscape — honestamente, solo porque eran muy fáciles de añadir.
• Propiedades arbitrarias — ahora Tailwind soporta propiedades CSS de las que nunca habíamos oído hablar.
• Play CDN — el nuevo motor Just-in-Time comprimido en un script CDN que se ejecuta directamente en el navegador.
• Toneladas de otras utilidades — incluyendo soporte para touch-action, will-change, flex-basis, text-indent, scroll-behavior y más.

Además de un hermoso y flamante sitio web de documentación, cargado con contenido mejorado y ejemplos en cada página.

Para empezar a jugar con Tailwind CSS v3.0 hoy, obtén la última versión de npm:

npm install -D tailwindcss@latest postcss autoprefixer

...o dirígete a Tailwind Play para probar las últimas características directamente en el navegador.

Tailwind CSS v3.0 es una nueva versión mayor del framework y hay algunos cambios menores que rompen la compatibilidad, pero hemos trabajado muy duro para hacer el proceso de actualización lo más fluido posible, y para la mayoría de los proyectos deberías poder instalar v3.0 sin hacer ningún cambio.

Por ejemplo, Tailwind UI es probablemente el proyecto Tailwind más grande del mundo y cada plantilla es totalmente compatible tanto con v2 como con v3 sin necesidad de cambios.

Para más detalles e instrucciones paso a paso sobre cómo migrar a v3.0, consulta la guía de actualización.

Just-in-Time, todo el tiempo

En marzo introdujimos el nuevo motor Just-in-Time que trajo enormes ganancias de rendimiento, desbloqueó nuevas y emocionantes características como valores arbitrarios, e hizo que las configuraciones complejas de variantes fueran cosa del pasado.

En Tailwind CSS v3.0, el nuevo motor se ha vuelto estable y ha reemplazado al motor clásico, por lo que cada proyecto de Tailwind puede beneficiarse de estas mejoras de forma predeterminada.

Todos los colores listos para usar

Antes del nuevo motor, siempre teníamos que tener cuidado con el tamaño del archivo CSS en desarrollo, y una de las mayores concesiones que tuvimos que hacer fue limitar cuidadosamente la paleta de colores.

En v3.0, cada color de la paleta de colores extendida está habilitado por defecto, incluyendo lime, cyan, sky, fuchsia, rose y cincuenta sombras de gray.

Consulta la referencia de la paleta de colores para obtener más información.

Sombras de caja coloreadas

La gente nos ha estado pidiendo sombras coloreadas durante años, pero soportarlo de una manera componible que realmente tuviera sentido fue mucho más difícil de lo que esperaba.

Después de unas cinco salidas en falso, finalmente descubrimos un enfoque que nos gustó, y ahora Tailwind CSS v3.0 incluye sombras coloreadas:

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Suscribirse</button>
<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Suscribirse</button>
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Suscribirse</button>

Obtén más información en la documentación de Color de Sombra de Caja.

API de Scroll snap

Hemos añadido un conjunto completo de utilidades para el módulo CSS Scroll Snap, dándote el poder de construir experiencias de scroll snapping muy ricas directamente en tu HTML:

Desplázate en la cuadrícula de imágenes para ver el comportamiento esperado

punto de snap

<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

Comienza con las nuevas utilidades de Margen de Scroll y recorre toda la API para obtener más información.

Layout Multi-columna

Hemos añadido soporte para columns — del tipo de layout de periódico. Estas son realmente súper útiles, y son geniales para cosas como layouts de navegación de pie de página también.

<div class="columns-1 sm:columns-3 ...">
  <p>...</p>
  <!-- ... -->
</div>

Obtén más información en la documentación de columns — y echa un vistazo también a las nuevas utilidades de break-after/inside/before.

Estilizado de controles de formulario nativos

Hemos añadido soporte para la nueva propiedad accent-color, así como un modificador para estilizar botones de entrada de archivo para que sea más fácil que nunca poner tu propio toque en los controles de formulario nativos:

Elegir foto de perfil

Sí, envíenme todas sus estúpidas actualizaciones

<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 actual"
      />
    </div>
    <label class="block">
      <span class="sr-only">Elegir foto de perfil</span>
      <input
        type="file"
        class="block w-full text-sm text-slate-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100"
      />
    </label>
  </div>
  <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-slate-600">
    <input type="checkbox" class="accent-violet-500" checked />
    <span>Sí, envíenme todas sus estúpidas actualizaciones</span>
  </label>
</form>

Obtén más información en la documentación de accent color y botones de entrada de archivo.

Modificador de impresión

El nuevo modificador print te permite estilizar cómo debería verse tu sitio cuando los ~~animales~~ personas lo imprimen:

<div>
  <article class="print:hidden">
    <h1>Mi receta secreta de pizza</h1>
    <p>Esta receta es secreta y no debe compartirse con nadie</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">¿En serio estás intentando imprimir esto? ¡Es secreto!</div>
</div>

Diría "obtén más información en la documentación de estilos de impresión" pero no sería verdad.

API moderna de aspect ratio

Hemos añadido soporte para la nueva propiedad nativa aspect-ratio, que está empezando a tener un sólido soporte en navegadores:

<iframe class="aspect-video w-full ..." src="https://www.youtube.com/..."></iframe>

Obtén más información en la documentación de aspect ratio.

Estilos de subrayado elegantes

Ahora puedes cambiar los colores, el grosor y más del subrayado:

<p>
  Soy Derek, un astro-ingeniero con sede en Tatooine. Me gusta construir X-Wings en
  <a href="#" class="underline decoration-sky-500 decoration-2"> Mi Compañía, Inc </a>. Fuera del trabajo, me gusta{" "}
  <a href="#" class="underline decoration-pink-500 decoration-dotted decoration-2"> ver carreras de pods </a> y tener
  <a href="#" class="underline decoration-indigo-500 decoration-wavy decoration-2"> peleas de sables de luz </a>.
</p>

Obtén más información en la documentación de color de decoración de texto, estilo de decoración de texto, grosor de decoración de texto, y desplazamiento de subrayado de texto.

Modificadores RTL y LTR

Hemos añadido soporte experimental para layouts multidireccionales con nuevos modificadores rtl y ltr:

De izquierda a derecha

Tom Cook

Director de Operaciones

De derecha a izquierda

تامر كرم

الرئيس التنفيذي

<div class="group flex items-center">
  <img class="h-12 w-12 shrink-0 rounded-full" src="..." alt="" />
  >
  <div class="ltr:ml-3 rtl:mr-3">
    <p class="text-sm font-medium text-slate-700 group-hover:text-slate-900">...</p>
    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-700">...</p>
  </div>
</div>

Obtén más información en la documentación de soporte RTL.

Modificadores Portrait y landscape

Usa los nuevos modificadores portrait y landscape para añadir estilos condicionalmente cuando el viewport está en una orientación específica:

<div>
  <div class="portrait:hidden">
    <!-- ... -->
  </div>
  <div class="landscape:hidden">
    <p>Esta experiencia está diseñada para ser vista en landscape. Por favor, rota tu dispositivo para ver el sitio.</p>
  </div>
</div>

La documentación para esta característica tiene incluso menos contenido que esta sección de esta publicación.

Propiedades arbitrarias

Esto podría ser ilegal, pero hemos hecho posible añadir CSS totalmente arbitrario que puedes combinar con modificadores como hover, lg y cualquier otro:

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

Esto es lo que los estilos inline quieren ser cuando crezcan. Obtén más información en la documentación de propiedades arbitrarias.

Play CDN

No hay forma de hacer una compilación CDN basada en CSS sensata para Tailwind CSS v3.0, así que tuvimos que hacer algo diferente — construimos una biblioteca JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ejemplo</title>
    <script src="https://cdn.tailwindcss.com/"></script>
  </head>
  <body>
    <!-- -->
  </body>
</html>

Añade esa etiqueta de script a cualquier documento HTML y podrás usar todas las características de Tailwind, directamente en el navegador. Está destinado solo para fines de desarrollo, pero seguro que es una forma divertida de construir pequeñas demos o experimentar con una nueva idea.

Obtén más información en la documentación de Play CDN.

Así que ahí lo tienes — ¡Tailwind CSS v3.0! Dirígete al nuevo sitio de documentación para empezar a usarlo hoy mismo.

Para una lista completa de cada cambio, consulta el changelog en GitHub.