A principios de diciembre se lanzó la tercera versión de uno de los frameworks CSS más utilizados y conocidos actualmente: Tailwind CSS. Vamos a repasar sus novedades más destacadas.
Adam Wathan y su equipo llevan haciendo un trabajo excelente con Tailwind desde sus inicios, y ahora no han decepcionado. Ojalá alguna de estas novedades traiga al lado de la luz a alguno de los muchos haters que tiene este framework 😉.
Qué es Tailwind CSS
Para quien no lo sepa, Tailwind es un framework CSS que te proporciona utility classes, que son un conjunto de clases CSS para que uses directamente ahorrándote así mucho tiempo escribiendo CSS. Lo bueno de Tailwind al lado de algunos otros, es que está suficientemente granulado para ayudarte a diseñar componentes personalizados.
Para quien no quiere o no puede dedicar un carro enorme de horas a crear un sistema de diseño propio, Tailwind es una gran maravilla, ya que permite crear muy rápidamente un sistema de forma relativamente rápida al ser muy personalizable y extensible.
Hace un tiempo publiqué un artículo donde puedes ver cómo crear un contenedor full bleed en Tailwind CSS, por si te interesa.
Novedades destacables en la versión 3.0
Compilador JIT habilitado por defecto
En la versión 2.1 de Tailwind se introdujo el compilador Just-In-Time. Si en Tailwind añadías muchas personalizaciones creando tu propio sistema de diseño, podías llegar a tener en producción hasta 10MB de CSS en el navegador, lo cual no es nada recomendable.
Con el compilador JIT, se disminuyen drásticamente los tiempos de compilación, todas las variantes de las clases (como focus-visible, active o disabled) están habilitadas por defecto y no hace falta configurarlas, el compilador las genera bajo demanda. Tamién es posible usar valores muy específicos que se salen del sistema de diseño cuando lo necesitemos, como un margen de 61px por ejemplo. Todos los estilos se generan bajo demanda.
También merece la pena mencionar que esto permite que el CSS sea idéntico entre el desarrollo y producción, ya no hace falta purgar los estilos que no se usan, al usarse todos ellos bajo demanda. Evidentemente, todo esto hace que el redimiento del navegador mejore mucho cuando estamos desarrollando un proyecto.
Scroll snap API
El scroll snap es el término que se usa para referirse a fijar la posición algunos elementos en alguna zona de la pantalla concreta cuando hay scroll. Por ejemplo, tienes una galería de imágenes y para ver la siguiente tienes que desplazarte un poco más abajo, pues haces solo un poquito de scroll, se detecta que estás dirigiéndote a la siguiente imagen y automáticamente el scroll se sitúa en el punto indicado para que la siguiente imagen quede en el centro. Creo que es más fácil entenderlo viendo algunos ejemplos.
Pues bien, Tailwind ahora tiene clases para poder hacer esto.
Estilos de elementos de formulario
Ahora tenemos disponibles algunos modificadores que nos facilitan la edición de elementos de los formularios, como los botones para añadir un archivo o los colores destacados por defecto de estos elementos.
Ya sabemos que editar los formularios a veces puede ser un poco engorroso, al menos ahora lo tendremos un poco más fácil.
Otras novedades
Se han añadido modificadores para controlar cómo debe verse el sitio si se imprime, ahora tenemos soporte para la nueva propiedad CSS aspect-ratio, también podemos añadir subrayados especiales al texto, modificadores para añadir estilos dependiendo de si el dispositivo está orientado verticalmente u horizontalmente.
En resumen, parece que esta nueva versión de Tailwind viene cargada con muchas mejoras interesantes. Puedes ver el detalle en su artículo de presentación.