Sistema de Diseno

Que son los temas Tailwind

Un tema Tailwind es una configuracion de diseno predefinida que establece los colores, la tipografia, el espaciado y otros tokens de diseno de tu sitio. FlowKit gestiona estos temas a traves de la integracion con WindPress, compilando Tailwind CSS v4 directamente en el servidor.

Cada tema se carga como un conjunto de variables CSS que se inyectan en la cascada del sitio. Esto permite cambiar toda la apariencia visual sin modificar una sola clase de utilidad en las plantillas.

Ubicacion de los temas

Los temas se almacenan en el directorio de subidas de WordPress, dentro de la carpeta de WindPress:

Ruta /wp-content/uploads/windpress/themes/

/wp-content/uploads/windpress/themes/
  mi-tema/
    theme.css        /* Variables CSS del tema */
    theme.json       /* Metadatos opcionales */

Estructura de un tema

Cada tema consiste en dos archivos:

Archivo	Obligatorio	Descripcion
theme.css	Si	Contiene las variables CSS (`--color-primary`, `--font-sans`, etc.) que definen los tokens del tema.
theme.json	No	Metadatos del tema: nombre, autor, version, descripcion y miniatura de previsualizacion.

Ejemplo de theme.css

CSS theme.css

@theme {
  /* Colores principales */
  --color-primary: oklch(0.65 0.24 265);
  --color-secondary: oklch(0.55 0.18 150);
  --color-accent: oklch(0.75 0.15 50);

  /* Tipografia */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Espaciado base */
  --spacing-unit: 0.25rem;

  /* Radios de borde */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

Previsualizacion de temas

FlowKit incluye un sistema de previsualizacion en tiempo real que permite ver los cambios de un tema antes de activarlo. El panel de previsualizacion se integra directamente en el editor de Bricks Builder.

Caracteristicas

Vista previa en vivo — Los cambios en las variables CSS se reflejan instantaneamente en el panel de previsualizacion, sin necesidad de recargar la pagina.
Modo claro y oscuro — Alterna entre ambos modos para verificar que el tema funciona correctamente en las dos variantes de apariencia.
Actualizacion automatica — Al seleccionar un tema diferente de la lista, la previsualizacion se actualiza automaticamente mostrando los nuevos tokens.

Como utilizar la previsualizacion

El flujo de trabajo es sencillo: selecciona un tema del listado en el panel izquierdo y observa el resultado en el panel derecho.

1. Abrir panel TDSM

→

2. Seleccionar tema

→

3. Ver previsualizacion

→

4. Activar o descartar

ⓘ La previsualizacion carga las variables CSS del tema en un iframe aislado. Los cambios no afectan al sitio publicado hasta que se active el tema explicitamente.

Generacion con inteligencia artificial

FlowKit permite generar temas personalizados utilizando inteligencia artificial. El sistema envia una solicitud al proveedor de IA configurado y recibe un tema completo listo para aplicar.

Metodos de generacion

📝

Por descripcion

Escribe una descripcion textual del estilo deseado. Por ejemplo: «Tema minimalista con colores tierra, tipografia serif y bordes redondeados».

🖼

Por imagen

Sube una imagen de referencia (captura de pantalla, moodboard, paleta de colores) y la IA extraera los tokens de diseno automaticamente.

Requisitos previos

Para utilizar la generacion con IA es necesario:

Tener una clave API valida configurada en el panel de Inteligencia Artificial de FlowKit.
Seleccionar un proveedor de IA compatible (los proveedores disponibles se configuran en el panel de ajustes).
Disponer de conexion a internet desde el servidor de WordPress.

Importante La generacion con IA consume creditos del proveedor configurado. Cada solicitud genera un tema completo con todas las variables CSS necesarias. Revisa los costes de tu proveedor antes de utilizar esta funcionalidad de forma intensiva.

Flujo de generacion

1

Introduce una descripcion o sube una imagen de referencia en el panel TDSM.

2

FlowKit envia la solicitud al proveedor de IA a traves de un proxy AJAX del servidor.

3

La IA devuelve un archivo theme.css con las variables generadas.

4

Previsualiza el resultado y, si es satisfactorio, guardalo como un tema nuevo.

Importar temas

Ademas de generar temas con IA, puedes importar temas existentes desde tres fuentes diferentes.

Fuentes de importacion

📦

Archivo ZIP

Un paquete comprimido que contiene la carpeta del tema con sus archivos theme.css y theme.json.

📄

Archivo JSON

Un archivo con la configuracion del tema en formato estructurado. FlowKit lo convierte automaticamente en theme.css.

🌐

URL remota

Una direccion web que apunte a un archivo ZIP o JSON. FlowKit lo descarga y procesa automaticamente.

Estructura del archivo ZIP

El archivo ZIP debe contener una carpeta con el slug del tema y, como minimo, el archivo theme.css:

mi-tema.zip
  mi-tema/
    theme.css           # Obligatorio — variables CSS del tema
    theme.json          # Opcional — metadatos (nombre, autor, version)
    thumbnail.png       # Opcional — miniatura de previsualizacion

Formato JSON

El archivo JSON permite definir el tema de forma estructurada. FlowKit lo interpreta y genera el theme.css correspondiente:

JSON mi-tema.json

{
  "name": "Mi Tema Personalizado",
  "author": "Tu Nombre",
  "version": "1.0.0",
  "tokens": {
    "color-primary": "oklch(0.65 0.24 265)",
    "color-secondary": "oklch(0.55 0.18 150)",
    "font-sans": "'Inter', system-ui, sans-serif",
    "radius-md": "8px",
    "spacing-unit": "0.25rem"
  }
}

ⓘ Al importar un tema con el mismo slug que uno existente, FlowKit te preguntara si deseas sobrescribirlo o crear una copia con un slug diferente.

Personalizacion

Cada tema puede personalizarse editando directamente sus variables CSS. Los cambios se propagan automaticamente a todos los valores derivados, lo que permite adaptar un tema a la identidad visual de tu marca con pocas modificaciones.

Variables principales

Las siguientes variables son las mas habituales en cualquier tema Tailwind gestionado por FlowKit:

--color-primary Color principal de la marca

--color-secondary Color secundario o complementario

--color-accent Color de acento para destacar elementos

--font-sans Familia tipografica principal

--font-mono Familia tipografica monoespaciada

--spacing-unit Unidad base de espaciado

--radius-sm Radio de borde pequeno

--radius-md Radio de borde mediano

--radius-lg Radio de borde grande

Propagacion de cambios

Tailwind CSS v4 utiliza un sistema de tokens basado en variables CSS. Cuando modificas una variable como --color-primary, todos los lugares del sitio que referencien ese token (fondos, bordes, textos, sombras) se actualizaran automaticamente.

CSS Ejemplo de personalizacion

@theme {
  /* Cambiar el color principal a un azul oscuro */
  --color-primary: oklch(0.45 0.2 250);

  /* Tipografia serif para un estilo editorial */
  --font-sans: 'Playfair Display', Georgia, serif;

  /* Bordes mas redondeados */
  --radius-md: 12px;
  --radius-lg: 24px;
}

⚠ Los cambios en las variables se aplican al guardar el tema. Utiliza la previsualizacion para verificar el resultado antes de activarlo en el sitio publicado.

Buenas practicas

Partir de un tema base — Duplica un tema existente en lugar de crear uno desde cero. Asi tendras todas las variables necesarias ya definidas.
Usar colores en formato oklch — Tailwind CSS v4 trabaja internamente con oklch. Usar este formato garantiza consistencia en la generacion de paletas automaticas.
Probar ambos modos — Verifica siempre que el tema funciona correctamente tanto en modo claro como en modo oscuro.
Documentar cambios — Si compartes temas con tu equipo, anade una descripcion en el theme.json explicando las decisiones de diseno.