Hace varios meses (al momento de escribir este artículo), Tailwind CSS abrió su trabajo en Tailwind CSS v4.0. (Puedes encontrarlo en GitHub aquí).

Recientemente, Tailwind anunció una beta pública para Tailwind CSS 4, y en este artículo cubriré los aspectos más destacados de la nueva versión. ¡Así que comencemos!

Cambios generales en la estructura

Tailwind ha sufrido un rediseño de su motor que mejora drásticamente el rendimiento. Las compilaciones completas son hasta 5 veces más rápidas, las compilaciones incrementales hasta 100 veces (has leído bien) más rápidas.

Tailwind v4 también tiene una cadena de herramientas unificada. ¿Recuerdas haber tenido que instalar autoprefixer y postcss en todos tus proyectos de Tailwind? ¡Ya no tendrás que hacerlo!

Adoptando un enfoque interesante para la configuración, Tailwind está pasando de archivos de configuración JS a configuración CSS. Esto significa que configurará complementos, temas y otros comportamientos directamente en su CSS.

Tailwind también recibe soporte para las últimas funciones de CSS.

¡CSS tiene un nuevo logotipo (y nuevas funciones)! ?

Mejores códigos ・ 23 de noviembre

#css #webdev #programación #conversar

Ahora, con los cambios generales listos, ¡veamos qué está agregando Tailwind específicamente!

¿Nuevas características?

Si desea probar Tailwind v4, consulte los documentos de introducción para v4 (beta).

Si desea actualizar fácilmente su proyecto, simplemente ejecute npx @tailwindcss/upgrade@next y Tailwind lo hará por usted. ¡Ten cuidado! Puede haber cambios importantes.

Bandera

La paleta de colores Tailwind v4 se basa en oklch en lugar de rgb. El sistema de color RGB es un poco limitante en términos de coherencia entre pantallas y vitalidad. Dado que el sistema de color oklch ahora es ampliamente compatible, ¡Tailwind v4 lo aprovechará!

Consultas de contenedores

Tailwind v4 ahora admite consultas de contenedores de forma predeterminada. Si no sabes qué son las consultas de contenedor, déjame explicarte.

¿Conoces cosas en Tailwind como md:, sm:, etc. que te permiten personalizar qué CSS se aplica en diferentes tamaños de pantalla?
En esos casos, las clases se refieren al tamaño de una ventana. Con las consultas de contenedores, pueden hacer referencia al tamaño de un contenedor.

En el ejemplo anterior, la cuadrícula tendrá 3 columnas, no cuando la ventana alcance el tamaño pequeño, sino cuando el contenedor lo tenga. Como puedes imaginar, esto es muy útil en diseños responsivos.


  
  
  Dimensionamiento del campo


el tamaño de campo aún no es una característica CSS universalmente admitida, ¡pero será increíble cuando lo sea! En lugar de necesitar JS para crear áreas de texto con cambio de tamaño automático, puedes usar solo CSS.

¡Y Tailwind v4 lo admite!

Pruebe la demostración en el sitio web de Tailwind.

Ahora puedes simplemente agregar la clase de contenido de tamaño de campo a tu área de texto para usarla.

  
  
  Actualizaciones de descendientes


Tailwind estable (quizás no lo sepas) tiene una variante * que te permite apuntar a hijos directos de un elemento con una clase. Por ejemplo:







La nueva variante ** en Tailwind v4 se dirigirá a todos los descendientes:








  
  
  Sombras insertadas (y anillos)


Ahora también será fácil crear sombras insertadas y anillos en elementos usando las clases inset-shadow y inset-ring.













  
  
  ¡Hay mucho más!


Si quieres ver todas las nuevas incorporaciones, visita https://tailwindcss.com/docs/v4-beta y ¡compruébalas!

¡Esta publicación es una publicación de #discusión! Por eso lo hice breve; ¡Quiero saber qué piensas!

Sé que muchos de ustedes, los que odian a Tailwind, probablemente tendrán algún comentario para mí. 

Definitivamente hay algunas características nuevas controvertidas y quiero obtener algunas opiniones. 

Resumen: ¡Deja un comentario!




¡Gracias por leer!

Mejores códigos