¿Que es winden?

Winden es actualmente uno de los únicos plugins que te permite beneficiarte de Tailwind de forma completa, es independiente del constructor visual (en la actualidad funciona con oxygen, Bricks Builder, Gutemberg entre otros), como es lógico en este tutorial nos enfocaremos en Bricks Builder.

Añade una serie de funcionalidades que nos facilitan la completa configuración de Tailwind sin que tengamos que preocuparnos de complejas instalaciones en nuestro WordPress.

Agrega funcionalidades como JIT (Just-inTime) un compilador que genera los estilos bajo demanda analizando nuestro proyecto de forma que genera un archivo que sólo incluye en la hoja de estilos de nuestro sitios las clases utilizadas hasta el momento.

Panel de control de Winden

Una vez dentro del panel de Winden, nos vamos a centrar en la pestaña de ajustes que es la que nos interesa en este momento, puedes consultar su documentación bien pulsando la pestaña de documentación o a través del siguiente enlace https://winden.dev/docs

En próxima versión el panel de configuración va a cambiar de forma muy significativa para usarse de forma sencilla lo que es la configuración de colores, fuentes, espacios… No obstante todo lo que comentamos a continuación seguirá siendo válido.

General

Esta última sección de los ajustes es donde podemos personalizar nuestra integración de Tailwind con nuestra instalción de WordPress, de forma que podemos elegir por ejemplo la versión de Tailwind que queremos utilizar. Se recomiendo utilizar la última versión pública, por lo que por lo general está primera opción no es necesario modificarla.

La siguiente opción nos permite activar el autocompletado en caso de querer utilizarlo, esta opción puede ser recomendable al principio si aun no estas familiarizado con el nombre de las clases. Una vez seleccionada la opción y guardada nuestra preferencia aparecerá a continuación un botón para autogenerar el archivo de auto completado.

Muchas de las opciones se explican por si solas, en las siguientes tres opciones podemos marcar si queremos poor ejemplo desactivar todos los estilos globales de WordPress cosa que no es aconsejable si no se tiene un dominio absoluto de Tailwind. Podemos seleccionar si queremos trabajar con Gutenberg o con Bricks Builder, En el caso que nos ocupa que es trabajar con Bricks Builder, nos permite también unos ajustes avanzados como es el registro de las 7000 clases aproximadamente en los estilos globales, cosa no muy recomendad ya que puede reducir el rendimiento de nuestro editor.

Podemos desactivar los estilos globales de Bricks y los generados en cada página, estas opciones al igual que los estilos de WordPress no es recomendable a no ser que lo definamos todo con Tailwind se requiere bastante habilidad y experiencia.

El último grupo de opciones es uno de los más interesantes ya que nos permite trabajar con una versión reducida del archivo que se genera bajo demanda. Esto significa que la petición la tenemos que hacer de forma manual nosotros mismos. La forma de Trabajar Tailwind es a través de cargar los estilos a través de un CDN, estos archivos como contienen toda la libraría de Tailwind ocupan aproximadamente unos 300 Kb sin comprimir. Al marcar el primer checkbox estamos seleccionando que se trabaje con un archivo CSS local que se generará y que solo contiene las clases que hemos utilizado en el proyecto.

Esta forma de trabajar es un poco distinta a lo que estamos acostumbrados ya que conforme editemos o avancemos en el proyecto seguro que vamos incluyendo nuevas clases y se hará necesario volver a regenerar el archivo CSS cacheado.

El segundo checkbox, permite que el administrador trabaje con la libraría Tailwind completa, ya que no hará uso del archivo generado. esto debe realizarse con precaución ya que es fácil que se nos olvide generar de nuevo el archivo ya que nosotros en la previsualización lo veremos todo correcto.

Una vez guardadas esta preferencias de la misma forma que el autocompletado, veremos que nos aprece el botón de generar el CSS y en la medida que sea necesario nos mostrara una sección adicional con más información al respecto.

Cuando pulsamos el botón de generar la caché, se genera una cola, ya que debe de usar el motor JIT de Tailwind para hacer la compilación solo de los estilos utilizados, aparecerá una tabla con la información sobre el proceso.

Si no generas el archivo en cache, se utilizará los estilos de Tailwind a través de un CDN, con lo que el rendimiento de la web bajará.

Tailwind Config

Esta es la parte donde se configura Tailwind propiamente dicho y se le añade mas funcionalidad a través de lo que se llama el proceso de extender o bien se modifican los valores existentes a través de la sobreescritura. Estos dos conceptos aunque son parecidos, debemos comprenderlos bien, ya que puede hacer que las cosas no funcionen como esperamos. La opción de extensión hay que añadirlos dentro de lo que es la parte que pone extend que empieza en la linea 3 y finaliza con el corchete de la linea 8. Según se muestra en el ejemplo a la paleta de colores tailwind se le añade un color llamado clifford con el valor #da773d, si en vez de colocarlo ahi, lo hubiéramos hecho a partir de la linea 8, hubiera desaparecido toda la paleta de tailwind y solo tendríamos ese color definido. Desde este archivo de configuración podemos modificar el comportamiento de tailwind para indicarle que tipografía usar, personalizar los colores, añadir o modificar los puntos de ruptura que necesitemos, los tamaños de fuente predeterminados y los espacios (margin y padding), etc.

Base CSS

Aunque es la primer pestaña lo hemos dejado para el final, aqui podemos añadir css o definir que los estilos de tailwind a aplicar a las clases que necesitemos. En este archivo hay una serie de directivas que conviene explicar

• @tailwind es una directiva para importar estilos globales de tailwind. Estas tres primeras lineas no se deben eliminar para que todo funcione correctamente.
• @layer nos permite añadir estilos personalizados a alguno de las partes importadas, en el caso en cuestión es components y aqui podremos modificar las clases que son propias de bricks builder o alguno de los plugins.
• @apply es una forma de incorporar las clases de utilidad de tailwind dentro de una clase, esto es útil cuando necesitamos escribir CSS personalizado para modificar o sobreescribir el comportamiento de una clase generada externamente (bricks o cualquier otro plugin)
• @support es una directiva condicional donde aplicara los estilos que contiene si el navegador cumple con la condición dada

Más tarde volveremos sobre este tema para presentar un ejemplo de estilos globales, donde vamos a incluir la tipografía y espaciado fluido, así como algún ejemplo de modificación de la clase de bricks. Este archivo de ejemplo te puede servir como inicio.