Antes de lanzar la primera versión del asistente de IA, estamos preparando el terreno para algo importante: la integración con WooCommerce 💪

El objetivo es ofrecer una serie de snippets y elementos configurables que permitan trabajar con Tailwind CSS directamente sobre las plantillas de WooCommerce del tema Bricks, sin necesidad de tocar código.

En la imagen puedes ver un adelanto del sistema: un conjunto de snippets que podrán activarse y personalizarse desde el panel del tema hijo.

Queremos que esta integración sea estable y práctica desde el primer día, por eso estamos afinando cada detalle antes del lanzamiento 🚀

Esta semana hemos avanzado mucho con el plugin, preparando el terreno para las siguientes mejoras importantes del ecosistema Flowtitude 💪

🌀 Actualización a Tailwind CSS v4.1.16

El plugin ya está completamente actualizado a la última versión de Tailwind. Esto mejora la compatibilidad y el rendimiento general en todos los entornos.

⚡️ Nuevo: CSS completo y offline para el editor

Desde el panel puedes generar ahora un archivo “Local Full CSS” (sin purge) para trabajar sin depender del CDN y tener todas las utilidades de Tailwind disponibles en el editor.
Ideal para flujos de trabajo locales o entornos sin conexión.

🗂️ Historial de archivos (experimental)

El plugin puede ahora mantener versiones antiguas de los archivos generados gracias al nuevo sistema Simple File System History. Perfecto para quienes quieren probar sin miedo a perder nada.

🧩 Soporte experimental para Sourcemaps de Tailwind v4

Facilita la depuración avanzada de estilos desde el navegador, especialmente útil para quienes personalizan el CSS a fondo.

🧱 Corrección en el refresco visual de Bricks

El botón “Reload Canvas” ahora fuerza un rebuild total e inmediato del CSS en el editor, eliminando los problemas de sincronización que aparecían en algunas configuraciones.

🧰 Otras mejoras

• Estabilidad general y rendimiento del panel.
• Feedback más claro al generar cachés.
• Refinamientos visuales y ajustes de interfaz.

🧩 Avance adicional:
Ya tenemos casi listo el nuevo sistema de licencias basado en FluentCart 🎟️
Actualmente está en fase de desarrollo e integración con el plugin y el resto del ecosistema de Flowtitude, lo que nos permitirá gestionar activaciones, membresías y actualizaciones automáticas desde el propio panel.
Más detalles muy pronto 👀

¿Quieres crear esquinas «invertidas» y formas con border-radius no convencionales sin perder horas en cálculos? He encontrado una herramienta gratuita e interactiva que genera SVGs, clip-path y máscaras listas para usar: Corner Inverter. Ideal para decorar secciones, botones o máscaras en tus layouts y mantener control total del aspecto responsivo.

Qué hace

• Diseña visualmente esquinas invertidas y exporta la forma en SVG.
• Ofrece varias opciones de exportación: SVG plano, clip-path (path), mask con data-URI y <clipPath> responsive.
• Recomendada para elementos decorativos, botones y máscaras responsivas (usa aspect-ratio para mantener proporciones). corner-inverter.douiri.org

Por qué te puede interesar

• Ahorra tiempo frente a implementaciones manuales complejas.
• Genera assets que funcionan bien con mask o <clipPath> (más responsivos que clip-path: path() puro).
• Open source y gratuita — perfecta para experimentar en proyectos Flowtitude.

Cómo usarla (resumen rápido)

1. Entra en la herramienta y ajusta dimensiones y parámetros hasta lograr la forma deseada.
2. Exporta como SVG o copia la opción mask/clipPath que prefieras.
3. Si usas mask, define aspect-ratio en el elemento para asegurar un escalado correcto.

Ejemplo mínimo (usar máscara SVG con aspect-ratio)

.mi-tarjeta {
  aspect-ratio: 16 / 9;
  mask: url('data:image/svg+xml;utf8,<svg...>') no-repeat center / contain;
}

(Sustituye data:image... por el SVG data-URI exportado por la herramienta.) corner-inverter.douiri.org

Casos de uso sugeridos

• Héroes/headers con formas atrevidas.
• Tarjetas de producto con bordes “recortados”.
• Botones o badges con efecto visual distintivo.
• Elementos decorativos en landings y mockups.

Idea clave 📖
Si vais a usar las formas como máscara responsive, siempre combinar mask o <clipPath> con aspect-ratio para evitar recortes inesperados en pantallas con distinta proporción.

Enlace / recurso
Probad la herramienta aquí: https://corner-inverter.douiri.org/ corner-inverter.douiri.org

Estamos trabajando en Flowtitude para mejorar las integraciones de Tailwind y Gutenberg dentro de WindPress.
Estos cambios sustituirán y mejorarán las integraciones actuales, además de corregir varios problemas detectados.

💬 Nos interesa mucho tu experiencia: cuéntanos qué problemas has tenido o qué te gustaría mejorar, así podremos resolverlos en las próximas versiones.

Te comparto un pequeño video con los avances hasta ahora 👇

¿Necesitas que un componente aplique utilidades directamente a su elemento padre?
Así puedes pasar de CSS puro a Tailwind 4.

🔧 CSS puro

*:has(> .card) {
  background-color: gray;
}

⚡ Tailwind 4 – Selector rápido

<div class="card [*:has(>&)]:bg-gray-100">
  <div class="@md:grid @md:grid-cols-[1fr_22rem]">
    <!-- contenido -->
  </div>
</div>

⭐ Tailwind 4 – Variante (RECOMENDADA)

Configuración (una vez):

@import "tailwindcss";
@custom-variant parent (*:has(> &));

Uso (limpio y legible):

<div class="card parent:bg-gray-100 parent:p-4">
  <div class="@md:grid @md:grid-cols-[1fr_22rem]">
    <!-- contenido -->
  </div>
</div>

✨ Resultado: puedes aplicar cualquier utilidad de Tailwind al elemento padre de forma automática.

La variante es más legible, reutilizable y sigue la misma lógica que hover: o group:.

De wireframe a diseño: cómo Bricks y Tailwind cambian la forma de crear webs en WordPress

En este post compartimos nuestro enfoque para separar el esqueleto semántico (con Bricks) del acabado final (con Tailwind + Flowtitude). Una forma de trabajar que hace los proyectos más escalables, fáciles de rediseñar y con menos marcado gracias a estilos semánticos.

👉 Léelo aquí: https://flowtitude.com/del-wireframe-al-diseno-bricks-como-esqueleto-semantico-y-tailwind-flowtitude-como-acabado-final-en-wordpress/

Seguro que más de una vez copiaste un bloque de alguna librería y al pegarlo no encaja exactamente con el resto de la página.

En este vídeo te muestro un ejemplo real: copiamos un bloque de tres tarjetas de Tailblocs, vemos los problemas típicos y lo adaptamos paso a paso a Flowtitude.

Hoy tenemos una aportación top: Luis Muños nos ha cedido un snippet que permite importar tarifas directamente en el plugin oficial de Correos para WooCommerce.
Con este aporte podrás cargar tus precios de envío en bloque, ahorrar tiempo y estandarizar configuraciones entre proyectos.

¿Qué incluye?

• 🧩 Snippet listo para usar (comentado y ordenado).
• 📄 Plantilla de datos para preparar tus tarifas.
• 🛠️ Guía rápida de instalación y uso.

Ideal para: tiendas con múltiples servicios de Correos, tramos por peso/zona y necesidades de actualización masiva.

👉 Descarga y guía: https://flowtitude.com/snippets/importador-de-tarifas-para-el-plugin-correos-oficial/
💬 Dudas o mejoras: déjalas en este hilo y mencionad a @Luis Muños para feedback.

Agradecimiento especial: ¡Gracias, Luis, por compartirlo con todos! 🙌

Todos aquí ya apostamos por Tailwind 💙, pero siempre surgen dudas sobre otros frameworks que rondan el ecosistema WordPress.

Por eso hemos preparado una guía práctica donde:
👉 Comparamos Tailwind, ACSS y Core Framework de forma clara y directa
👉 Mostramos en qué casos cada uno tiene sentido
👉 Y reforzamos por qué Tailwind es la opción más sólida y escalable para nuestros proyectos

Así, si alguna vez te planteas “¿y si…?”, tendrás una referencia sencilla para despejar la duda.

📥 Descárgala gratis aquí: https://shorturl.at/9QJ4W

Después de días de trabajo, por fin tenemos una versión sólida y modular de nuestra configuración personalizada para Tailwind CSS.

💡 ¿Qué incluye esta nueva versión?

• Mejoras en la creación de padding para secciones automatizado
• Mejora en el componente de tarjetas
• Listo el componente para alinear elementos con content-flex
• Mejorado el componente content-grid
• CSS completamente documentados con ejemplos

🧪 Esta semana vamos a empezar a probarla en entornos reales, y si todo va bien… la liberaremos antes del viernes.