El wizard de Yabe SIUL

El asistente está dividido en componentes que representan diferentes partes de la configuración de Tailwind CSS:

Tailwind CSS por defecto tiene cinco puntos de interrupción de forma predeterminada, inspirados en resoluciones de dispositivos comunes:

a través de está sección puedes o bien modificar los puntos de ruptura existentes o bien añadiendo nuevos, de forma que el campo name se utilizado como clave para tailwind.

Tal como se puede ver en la captura de pantalla, se puede estrablecer un ancho mínimo y/o maximo. No obstante la forma predeterminada de trabajo de Tailwind CSS tal como se puede ver en la tabla superior solo trabaja con anchos mínimos de forma que adopta la forma de mobil-first.

Para terminar comentar que los puntos de ruptura creados con el asistente no sustituyen a los existentes solo extienden la configuración.

Aqui los valores creados corresponden al objeto de tailwind espaciado y que afecta a el ancho, alto, margen, relleno y tamaño (size) de forma global, de forma que las opciones que definamos estarán disponibles  para todas estas clases de utilidad.

Puedes ver la documentación de tailwind si necesitas cubrir este aspecto en profundidad en el siguiente enlace:

Puedes ver en acción tanto la sección de espaciado como de tipografía en un video al pie de página, donde vamos a ver como funciona la calculadora de valores fluidos situada en la parte derecha de la sección.

La tipografía funciona de forma similar al espaciado solo que afecta como es lógico a los tamaños de fuentes, como hemos indicado en la sección de screen todas estas opciones del asistente extienden la configuración y no eliminan los valores predeterminados si no los sobreescribes definiendolos nuevamente.

Desde esta sección podemos extender la paleta de colores de Tailwind CSS. En estos momentos la gradación de cada color se hace de forma automática, y aunque comenta que en futuras versiones esta parte sera mejorada creo que asi funciona bien para evitar paletas arbitrarias o descompensadas.

Una cosa que si es útil es que sobre cada color, es posible seleccionar si quieres que te cree la gradación o solo el color en particular.

Esta parte del wizar te permite añadir plugins de tailwind sin esfuerzo a traves de un selector que autocompleta a medida que escribes. Hay que tener especial atención a que a veces hay plugins con nombres parecidos y hay que asegurarse de elegir el adecuado.

Tambien puedes seleccionar la versión del plugin desde el desplegable siguiente.