Published
- 7 min de lectura
Lo que trae Tailwind CSS v3.4.0
Basado en el artículo escrito por Adam Wathan para el blog de Tailwind CSS.
Soy un entusiasta de Tailwind CSS. De hecho, lo he integrado en la mayoría de mis proyectos. Siento que me permite estilizar de manera más rápida y personalizable que algunas otras herramientas (en especial, una que comienza con B). En fin, es cuestión de preferencia.
El diciembre 19 del año 2023, Adam Wathan, creador de Tailwind CSS, compartió en el blog del framework las principales mejoras que ha traido la release 3.4.0. con respecto a las anteriores.
Soporte a unidades de viewport dinámicas
Las unidades de viewport son un conjunto de unidades css que se basan en un porcentaje de las dimensiones del área visible o gráfica (viewport). Las unidades de viewport clásicas son vw (viewport width, o ancho del viewport) y vh (viewport height, o altura del viewport). Por otro lado, Abhislek Kr Sahu nos informa que unas nuevas unidades de viewport fueron agregadas en marzo de 2022.
- ”Svh” (small viewport height) es usado cuando quieres usar un viewport height pero que el viewport excluya la sección del navegador donde se ubica la url y demás.
- ”Lvh” (large viewport height) solo tiene una diferencia con el anterior “svh”: este toma en cuenta un viewport que sí incluye la barra de url.
- ”Dvh” (dynamic viewport height) es dinámico: se adapta cuando el usuario hace scroll y excluye las interfaces de usuario.
Lo mismo aplica para el viewport width: “Svw”, “Lvw” y “Dvw”.
Ahora estas nuevas unidades está integradas en el ecosistema de Tailwind CSS. Para utilizarlas, prueba las clases h-dvh, min-h-svh, -max-h-dvh.
variante :has()
Sí, mi conocimiento de CSS ha ido esfumándose progresivamente desde que instalé Tailwind CSS por primera vez. A pesar de mi condición, debo destacar lo bien que los mantenedores y desarrolladores de CSS hacen su trabajo. La pseudo-clase :has() es claro ejemplo de esto.
De acuerdo al ya conocido sitio MDN Web Docs, “La pseudo-class CSS :has() representa un elemento si cualquiera de los selectores, en relación con el :scope (en-US) del elemento dado, que se pasa como parámetro, coincide con al menos un elemento. La pseudo clase :has() tomo un selector como argumento”.
La estructura es así:
/* Esto selecciona a una cabecera h1 con un elemento p,
párrafo, que prosiga al h1 y aplica el estilo al h1 */
h1:has(+ p) {
margin-bottom: 0;
}La pseudo-clase, entonces, nos hace capaces de estilizar con una precisión basada en la especificidad de los elementos hijo sin precedentes. Ahora, aunque no esté soportada en su totalidad por los navegadores de hoy, :has() se encuentra totalmente lista para usar en Tailwind CSS, y creo que es cuestión de tiempo el aprovecharla en gran parte de los sitios web futuros.
Estilizado de elementos hijo con variante *
En corto, la nueva variante * está dirigida a todos los elementos hijo. Un ejemplo aparecido es este:
<div>
<h2>Categories:<h2>
<ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">
<li>Sales</li>
<li>Marketing</li>
<li>SEO</li>
<!-- ... -->
</ul>
</div>”*” se puede combinar con otras variantes, como con hover.
hover:*:underline
Wathan nos menciona que esta variante es útil cuando no puedes controlar los elementos hijo (contenido dinámico) o tienes que tomar en cuenta estilos más condicionales.
Utilidades size-*
La nueva utilidad size-[valor] cambia el ancho y la altura al mismo tiempo
<!--Antes-->
<img class="w-12 h-12" />
<!--Después-->
<img class="size-12" />Se hace conveniente cuando “lo combinas con variantes o utilizas un valor arbitrario complejo”.
Líneas de cabecera con utilidades text-wrap
Ahora existen las utilidades text-balance y text-pretty para hacer rompimientos de líneas y acomodar de una manera más estética el texto. El primero ya añade el “wrap” sin necesidad de otros recursos como el “max-width”. El segundo cumple la función de evitar palabras solas al final de una línea, como se produciría con el text-balance.
<article>
<h3 class="text-balance ...">Beloved Manhattan soup stand closes<h3>
<p>New Yorkers are facing the winter chill...</p>
</article>
<article class="text-pretty ...">
<h3>Beloved Manhattan soup stand closes<h3>
<p>New Yorkers are facing the winter chill...</p>
</article>Cabe destacar que esta utilidad cuenta con un fallback para funcionar en navegadores más antiguos, así que no hay de qué preocuparse.
Soporte para subgrid
Subgrid, añadidura reciente al sistema CSS Grid, es soportada por Tailwind. El objetivo de esto es hacer que los elementos hijo de un padre Grid puedan extraer las filas y columnas de este último.
Aquí un ejemplo del artículo:
<div role="menu" class="grid grid-cols-[auto_1fr]">
<a href="#" class="grid-cols-subgrid col-span-2">
<svg class="mr-2">...</svg>
<span class="col-start-2">Account</span>
</a>
<a href="#" class="grid-cols-subgrid col-span-2">
<svg class="mr-2">...</svg>
<span class="col-start-2">Settings</span>
</a>
<a href="#" class="grid-cols-subgrid col-span-2">
<span class="col-start-2">Sign out</span>
</a>
</div>Más escalas min-width, max-width…
El equipo detrás de Tailwind han ampliado el abanico de opciones que tenemos al escoger un valor para las utilidades mid-width, max-width y min-height, incluyendo por fin demás escalas como los REM y no solo lg o xl. Después de un tiempo, se pueden hacer cosas así:
<div class="min-w-12">
<!-- ... -->
</div>Escala de opacidad expandida
La utilidad de opacity- puede usarse con todos los múltiplos de 5 hasta 100.
<div class="opacity-35">
<!-- ... -->
</div>Más escalas para grid-rows-*
La escala de valores para la propiedad grid-rows- alcanza un nuevo límite de 12, más comparado con el anterior que era de 6.
<div class="grid grid-rows-9">
<!-- ... -->
</div>Wathan bromea (o tal vez no) con subirlo a 16 en una siguiente release.
Nueva variante forced-colors
La media feature forced-colors ayuda al desarrollador a detectar si el usuario ha habilitado algún modo de forced-colors que fuerza una paleta de colores específica en el sitio que se visita. Frente a esto, Tailwind nos ofrece la variante también denominada forced-colors con tal de que apliquemos estilos que se vean bien, sin importar la lente con la cual el usuario navega nuestra página.
<form>
<input type="checkbox" class="appearance-none forced-colors:appearance-auto ..." />
</form>Nuevas utilidades forced-color-adjust
Tailwind CSS tiene las utilidades forced-color-adjust-auto y forced-color-adjust-none para regular la manera en que el modo de forced-colors impacta en la apariencia del sitio. Wathan recomienda su uso discreto, más cuando se quieren conservar los estilos en un determinado elemento. Sugiere un ejemplo concreto: cuando un usuario escoge el color de lo que quiere comprar en una e-commerce.
<fieldset>
<legend>Choose a color</legend>
<div class="forced-color-adjust-none ...">
<label>
<input class="sr-only" type="radio" name="color-choice" value="white" />
<span class="sr-only">White</span>
<span class="size-6 rounded-full bg-white"></span>
</label>
<label>
<input class="sr-only" type="radio" name="color-choice" value="gray" />
<span class="sr-only">Gray</span>
<span class="size-6 rounded-full bg-gray-300"></span>
</label>
<!-- ... -->
</div>
</fieldset>Cambios menores
Extraido de las notas de lanzamiento
- Simplicar el stack de font-family sans (#11748);
- desabilitar el overlay y subrayado que hay en botones tap en iOS (#12299);
- mejorar procedencia relativa de variantes de rtl, ltr, forced-colors y dark (#12584);
- actualizar estilos html de Preflight para incluir la pseudo-clase :host del shadow DOM (#11200);
- añadir utilidad appearance-auto (#12404);
- añadir valores de logical property para las utilidades float y clear (#12480).