Temario completo del curso “Descubre Tailwind”

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