Cada vez hay más frameworks, utilidades y promesas de productividad.
Pero… ¿cuál se adapta realmente a tu forma de trabajar?

Estoy creando una guía comparativa para ayudar a diseñadores y desarroladores frontend a elegir el enfoque adecuado y dejar de perder tiempo con herramientas que no necesitas.

🔍 ¿Qué incluye?

• Comparativa real entre Tailwind, ACSS, BEM + tokens
• Pros y contras de cada enfoque
• Cuándo usar uno u otro (no hay una única verdad)
• Recomendaciones según el flujo de trabajo utilizado

✉️ Disponible este lunes

Hemos abierto el blog de Flowtitude para que podáis acceder a todos los contenidos sin necesidad de registro.
Y para celebrarlo, ya tenéis disponible una nueva guía:

👉 https://flowtitude.com/container-queries-tailwind-wordpress/

En este artículo explico cómo usar Container Queries con Tailwind 4, aplicadas directamente en WordPress con Bricks Builder y Gutenberg.

🛠️ Verás:

• Qué son las Container Queries y para qué sirven
• Cómo se configuran con Tailwind (modo @theme)
• Ejemplos reales y casos prácticos

Me interesa mucho vuestro feedback:

• ¿Ya las habéis probado?
• ¿Os parece útil su integración en Tailwind?

¡Vamos puliendo Flowtitude entre todos! 💪

Un recorrido paso a paso para aprender Tailwind CSS desde cero, aplicándolo con WordPress, Bricks Builder y Gutenberg.

🧩 Módulo 1 – Introducción a Tailwind CSS

Una base clara para empezar con buen pie

Descubre qué es Tailwind, qué lo diferencia de otros frameworks, y cómo puedes empezar sin complicaciones técnicas.

Lecciones

1. ¿Qué es Tailwind y por qué usarlo en WordPress?
2. CSS tradicional vs frameworks: el problema que resuelve Tailwind
3. ¿Componentes o utilidades? Entendiendo los enfoques
4. Cómo funciona Tailwind internamente
5. Flujo básico de trabajo con Tailwind

🧩 Módulo 2 – Tailwind con Bricks y Gutenberg

Cómo configurarlo correctamente y evitar errores típicos

Explora los desafíos más comunes al trabajar con Tailwind en Bricks Builder y Gutenberg. Aprende a crear un entorno funcional, limpio y optimizado.

Parte 1 – Bricks Builder

1. Ventajas de usar Tailwind con Bricks
2. Configuración básica y buenas prácticas
3. Clases personalizadas y panel de atributos
4. Gestión visual y control de diseño
5. Casos reales y patrones recomendados

Parte 2 – Gutenberg

1. Limitaciones y retos de usar Tailwind en Gutenberg
2. Opciones disponibles: edición clásica vs bloques avanzados
3. Cómo configurar Tailwind con editores como Blocksy, Spectra, Kadence
4. Soluciones para evitar conflictos de estilos
5. Patrones útiles para bloques personalizados

🧩 Módulo 3 – HTML semántico, layouts y diseño visual

Estructuras claras, escalables y sostenibles

Construye páginas bien estructuradas usando etiquetas semánticas, layouts con Grid y Flexbox, y patrones visuales reutilizables.

Lecciones

1. HTML semántico: etiquetas que organizan el contenido
2. El patrón section + container
3. Estructura visual con Flexbox
4. Estructura visual con Grid
5. Agrupar contenido y crear jerarquía
6. Casos reales de layout (hero, blog, footer…)

🧩 Módulo 4 – Utilidades y sistema visual en Tailwind

La clave para el control visual total

Aprende a trabajar con tipografía, color, espaciado, sombras y bordes desde la lógica de utilidades. Domina las claves del diseño preciso.

Lecciones

1. Tipografía: tamaños, pesos y alturas
2. Colores y sistema de diseño coherente
3. Espaciado interno (padding) y externo (margin)
4. Bordes, radios y sombras
5. Z-index y posición
6. Transiciones y animaciones básicas

🧩 Módulo 5 – Componentes reutilizables y patrones

Diseño sistemático con reutilización real

Aprende a construir botones, tarjetas, bloques reutilizables y secciones completas. Diseña una vez, reutiliza siempre.

Lecciones

1. ¿Qué es un componente visual en Tailwind?
2. Botones y estados (hover, focus…)
3. Tarjetas, cajas de contenido y modales
4. Secciones modulares
5. Diseño basado en patrones
6. Organización y nomenclatura

🧩 Módulo 6 – Tailwind en otros constructores visuales

LiveCanvas, Builderius y otros entornos avanzados

Explora cómo usar Tailwind en editores más técnicos o híbridos. Aprende qué configurar y cómo mantener consistencia visual.

Lecciones

1. ¿Cuándo usar otros constructores en lugar de Bricks o Gutenberg?
2. Tailwind con LiveCanvas: configuración y ejemplos
3. Tailwind con Builderius: ventajas e integración
4. Tailwind en maquetadores sin integración nativa
5. Consideraciones para diseños híbridos

🧩 Módulo 7 – Tailwind en entorno local con VS Code

Trabaja sin WordPress y aprende a usar herramientas profesionales

Configura Tailwind en tu ordenador usando VS Code. Aprende a usar Live Preview y trabajar en proyectos sin CMS.

Lecciones

1. ¿Por qué trabajar en local? Ventajas
2. Instalación de Node y Tailwind CSS
3. Configuración inicial del entorno
4. Uso de Live Server y extensiones
5. Organización de archivos y carpetas
6. Integración con proyectos HTML estáticos

🧩 Módulo 8 – Configuración avanzada de Flowtitude

Tu sistema de diseño con Tailwind personalizado

Adapta Flowtitude a tus proyectos: edita tokens, personaliza utilidades y documenta tu sistema visual.

Lecciones

1. ¿Qué es Flowtitude y cómo está estructurado?
2. Configuración de tokens (color, tipografía, espaciado…)
3. Edición del archivo de configuración @theme
4. Capas CSS y organización semántica
5. Uso de clases personalizadas y presets
6. Flujo de trabajo con Bricks + Flowtitude

🧩 Módulo 9 – Buenas prácticas y estrategia visual

Escala tu forma de diseñar con criterio profesional

Aprende cómo aplicar una estrategia visual clara, mantener orden en grandes proyectos y diseñar con visión de futuro.

Lecciones

1. La importancia de un sistema visual consistente
2. Naming y organización de clases
3. Jerarquía de decisiones visuales
4. Cómo evitar el caos en proyectos reales
5. Estilo visual vs funcionalidad
6. Documentación, comunicación y entrega a clientes

¡Seguimos avanzando con los ejercicios del curso "Descubre Tailwind"!
En esta ocasión os comparto un primer vistazo a lo que será la tercera demo práctica: una página de inicio para una tienda de joyería.

El objetivo con este diseño es practicar layouts más complejos, trabajar mejor la jerarquía visual y reforzar el uso de tipografía, espaciados y secciones bien estructuradas con Tailwind. 🛠️

Aún faltan ajustes en comportamiento responsive y posibles animaciones, pero la base ya está definida y servirá como ejercicio completo para construir una home visualmente atractiva y funcional.

Quería compartir con vosotros un adelanto de lo que será la segunda demo y ejercicio práctico del curso. Aunque todavía quedan detalles por pulir —como mejorar la parte responsive y añadir algunas animaciones—, ya se puede ver el diseño base que vamos a utilizar.

Este tipo de ejemplos están pensados para practicar estructuras reales con Tailwind, construir componentes reutilizables y reforzar todo lo aprendido en el módulo. Poco a poco iremos subiendo el nivel, y este es solo un paso más en esa dirección. 🚀

Estoy ajustando algunos detalles de última hora y he decidido mover el inicio del prelanzamiento del curso “Descubre Tailwind” al lunes.

La razón es muy simple: quiero lanzar acompañado de ejemplos visuales reales que muestren lo que se puede lograr con Tailwind y WordPress.
Estoy preparando varias páginas de práctica, que además podréis reutilizar como base o inspiración para vuestros propios proyectos.

Estas páginas no solo sirven como demo, sino también como material promocional del curso y referencia directa para alumnos y curiosos.

📣 El lunes lanzamos con todo:

• Ejemplos listos.
• Página de pago activa.
• Embudo en marcha.

Gracias por la paciencia y el apoyo. ¡Esto ya empieza a tomar forma!

🔍 La primera ya está online, aunque todavía faltan algunos retoques:
👉 https://flowtitude.com/podcast/

Quería contaros una decisión importante en la que he estado trabajando estos días.
En lugar de crear un nuevo plugin desde cero, he decidido aprovechar la versión gratuita de WindPress como base, y a partir de ahí desarrollar una integración personalizada para Bricks Builder.

Esto me permite enfocarme en resolver de forma práctica los puntos donde WindPress se queda corto al trabajar con Bricks, sin tener que reinventar todo el sistema desde cero. Además, sigue siendo totalmente compatible con Flowtitude y deja la puerta abierta a futuras integraciones y mejoras.

💡 ¿Qué puedes esperar?

• Una experiencia más fluida y sin problemas con las clases planas
• Mejor detección de clases y uso real en el contenido.
• Compilación mas robusta y rapida.

En los próximos días compartiré avances y cómo activarlo en tus proyectos.

Si tienes sugerencias o ideas sobre qué debería incluir esta integración, me encantaría leerte.

El equipo de Tailwind acaba de anunciar una gran mejora:
Todos los bloques UI de Tailwind Plus ahora son totalmente funcionales, accesibles e interactivos, ¡incluso en sus versiones en HTML puro!

Sin necesidad de React, Vue ni JavaScript personalizado.

🧱 ¿Cómo lo han conseguido?

Con el lanzamiento de @tailwindplus/elements, una nueva librería exclusiva para clientes de Tailwind Plus:
Un conjunto de custom elements headless que encapsulan toda la lógica de interacción, accesibilidad y comportamiento.

Ahora puedes usar componentes como:

• Menús desplegables
• Diálogos y paletas de comandos
• Tabs, selectores personalizados, disclosures...

Todo directamente con HTML + clases de utilidad de Tailwind.

📦 Elementos incluidos:

• Autocomplete
• Command palette
• Dialog
• Disclosure
• Dropdown menu
• Popover
• Select
• Tabs

🔧 ¿Y Flowtitude?

👉 En Flowtitude, vamos a empezar a incorporar estos avances en nuestros componentes personalizados, en la medida de lo posible, para aprovechar lo mejor de esta evolución sin depender de frameworks.

📚 Puedes consultar todos los ejemplos y la nueva documentación aquí:
👉 https://tailwindui.com/plus/elements

¡Muy atentos a las próximas actualizaciones del sistema Flowtitude!

Una versión centrada en correcciones críticas y mejoras de estabilidad tras el gran salto a Bricks 2.0.

📌 Esta actualización resuelve muchos de los errores comentados recientemente e incluye mejoras en el constructor, el administrador de clases y la edición masiva, entre otros.

🔄 Se recomienda actualizar si ya estás usando la 2.0, especialmente para quienes hayan tenido errores recientes con clases, loops o interacciones.

📄 Puedes revisar el changelog aquí:
👉 https://bricksbuilder.io/release/bricks-2-0-1/

Bueno parece que los botones no se perdieron... los cambiaron de lugar, personalmente creo que no es el sitio, pero en fin, tampoco es para tanto.