Tailwind CSS v1.9.0

Acabamos de lanzar Tailwind CSS v1.9 que agrega soporte para presets de configuración, nuevas y útiles utilidades de CSS grid, escalas extendidas de border radius, rotate y skew, mejoras útiles de accesibilidad, ¡y más!

Vamos a ver los aspectos más destacados...

• Presets de configuración
• Utilidades para grid-auto-columns y grid-auto-rows
• Mejoras en el indicador de foco y contornos configurables
• Escalas extendidas de border radius, rotate y skew
• Actualizando a v1.9

Para el resumen completo de los cambios revisa las notas de la versión en GitHub.

Presets de configuración

Tailwind CSS v1.9 agrega una nueva clave presets al archivo tailwind.config.js que hace posible configurar una "configuración base" personalizada para tus proyectos.

module.exports = {
  presets: [require("@my-company/tailwind-base")],
  theme: {
    extend: {
      // Sobrescrituras específicas del proyecto...
    },
  },
};

Lo que sea que proporciones bajo presets reemplaza la configuración base predeterminada de Tailwind, por lo que puedes definir tu propio punto de partida totalmente personalizado. Esto es muy útil si eres parte de un equipo que trabaja en múltiples proyectos diferentes de Tailwind que necesitan compartir los mismos colores de marca, personalizaciones de fuentes o escala de espaciado.

Puedes incluso listar múltiples presets, que se fusionan de arriba a abajo:

module.exports = {
  presets: [require("@my-company/tailwind-base"), require("@my-company/tailwind-marketing")],
  theme: {
    extend: {
      // Sobrescrituras específicas del proyecto...
    },
  },
};

La lógica para fusionar tu configuración específica del proyecto con tu configuración base personalizada es exactamente la misma que cómo funcionan las cosas con la configuración predeterminada, por lo que todas las características a las que estás acostumbrado como extend siguen funcionando exactamente como esperarías.

Utilidades para grid-auto-columns y grid-auto-rows

Hemos agregado nuevos plugins core gridAutoColumns y gridAutoRows que agregan nuevas utilidades para las propiedades CSS grid-auto-columns y grid-auto-rows respectivamente.

Estas utilidades te permiten controlar el tamaño de las columnas y filas de la cuadrícula creadas implícitamente. Úsalas para establecer un tamaño predeterminado de columna/fila siempre que no especifiques un número de columnas/filas para tu cuadrícula.

<div class="grid auto-cols-max grid-flow-col">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Aquí hay una lista de las nuevas utilidades que se incluyen por defecto:

Incluimos variantes responsive para estas utilidades por defecto, y se pueden configurar tal como esperarías en las secciones gridAutoColumns y gridAutoRows de tu archivo tailwind.config.js.

Mejoras en el indicador de foco y contornos configurables

Hemos actualizado la clase outline-none para renderizar un contorno transparente por defecto en lugar de no renderizar ningún contorno. Esto es muy útil para las personas que usan el modo de alto contraste de Windows, donde los estilos de foco personalizados basados en box-shadow son completamente invisibles.

Ahora puedes crear estilos de foco personalizados usando box shadows de forma segura, sin dificultar el uso de tus sitios para personas con baja visión.

<button class="focus:shadow-outline focus:outline-none ...">
  <!-- ... -->
</button>

También hemos agregado dos nuevos estilos de contorno: outline-white y outline-black.

Estas utilidades renderizan un contorno punteado de 2px en su color respectivo, con un desplazamiento de 2px. Funcionan muy bien como indicadores de foco discretos de propósito general que facilitan a los usuarios de teclado ver qué elemento en la pantalla está seleccionado, sin chocar demasiado con tu diseño.

Hemos incluido variaciones white y black para que siempre puedas estar seguro de tener una opción disponible que tenga suficiente contraste con cualquier color de fondo que estés usando.

<!-- Usa `outline-white` en fondos oscuros -->
<div class="bg-gray-900">
  <button class="focus:outline-white ...">
    <!-- ... -->
  </button>
</div>
<!-- Usa `outline-black` en fondos claros -->
<div class="bg-white">
  <button class="focus:outline-black ...">
    <!-- ... -->
  </button>
</div>

Por supuesto, también eres libre de crear los estilos de foco personalizados que quieras usando colores de fondo, box shadows, bordes, lo que sea. Sin embargo, estos son geniales si no quieres ponerte demasiado sofisticado.

También hemos hecho configurable la propiedad outline, por lo que ahora puedes definir contornos personalizados en tu archivo tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      outline: {
        blue: "2px solid #0000ff",
      },
    },
  },
};

También puedes proporcionar un valor de outline-offset para cualquier utilidad de contorno personalizada usando una tupla de la forma [outline, outlineOffset]:

module.exports = {
  theme: {
    extend: {
      outline: {
        blue: ["2px solid #0000ff", "1px"],
      },
    },
  },
};

Escalas extendidas de border radius, rotate y skew

Hemos agregado tres nuevas utilidades de border radius por defecto:

...y un conjunto extendido de valores más pequeños para las utilidades rotate y skew:

También se incluyen versiones negativas para todas estas. ¡Súper útil para efectos de rotate y skew más sutiles!

Actualizando

Tailwind CSS v1.9 es una versión menor sin cambios disruptivos, así que para actualizar todo lo que necesitas hacer es ejecutar:

# npm
npm install tailwindcss@^1.9
# yarn
yarn add tailwindcss@^1.9

Hemos promovido dos características previamente experimentales (defaultLineHeights y standardFontWeights) a future, por lo que también recomendamos optar por esos cambios ahora para simplificar la actualización a Tailwind CSS v2.0 más adelante este otoño.

¿Quieres hablar sobre esta publicación? Discútelo en GitHub →