El Wizard de Yabe SIUL

Con el asistente de Yabe SIUL puedes configurar Tailwind CSS automáticamente, eliminando la necesidad de escribir código. Ofrece una experiencia simplificada mediante un interfaz visual para la creación de tu configuración de Tailwind CSS

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

Screens

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

Punto de interrupciónAncho MínimoCSS
sm640px@media (min-width: 640px) { ... }
md768px@media (min-width: 768px) { ... }
lg1024px@media (min-width: 1024px) { ... }
xl1280px@media (min-width: 1280px) { ... }
2xl1536px@media (min-width: 1536px) { ... }

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.

Espaciado

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:

https://tailwindcss.com/docs/customizing-spacing

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.

Tipografía

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.

Colores

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.

Plugins

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.

Tipografía y espaciado fluido

A continuación puedes ver una descripción general y rápida de nuestro ecosistema
Guia de acceso rápido

Accede a la guía de inicio rápido para comenzar a trabajar con nuestro ecosistema de manera ágil.

Más información
Componentes

Una selección de elementos fundamentales para iniciar el diseño de tus propias secciones de manera eficaz.

Más información
Bloques de diseño

No comiences con una página en blanco, usa nuestras secciones básicas para diseñar eficazmente tus wireframes.

Más información
Componentes Woocommerce

Si buscas una tienda moderna y sin complicaciones, tenemos todo lo necesario para empezar.

Más información