Vector C · Bricks Nativo → Tailwind v4

Tienes un proyecto en Bricks sin ACSS ni otros addons y quieres llevarlo a Tailwind v4. Este vector lee la paleta, variables y clases globales de Bricks y genera el CSS equivalente.

Origen y destino

• Origen: proyecto Bricks puro. Los datos están en bricks_color_palette, bricks_global_variables, bricks_global_classes y, opcionalmente, estilos inline en _bricks_data de cada post.
• Destino: archivo CSS de Tailwind v4 con @theme + @layer components.

Prerequisitos

• Bricks Builder 1.9+ activo
• Licencia BricksShift activa

(No necesita Tailwind preinstalado; lo genera.)

Qué extrae

ParserBricks lee:

• Paleta de colores (bricks_color_palette): array de { id, name, hex, raw }.
• Variables globales (bricks_global_variables): tipografía, spacing, etc.
• Clases globales (bricks_global_classes): array de { id, name, settings } con sus propiedades CSS.
• CSS custom (bricks_custom_css): CSS global.
• Estilos inline en _bricks_data de todos los posts: los estilos aplicados directamente a un elemento concreto se extraen como clases bs-elem-{element_id}.

Qué genera

@import "tailwindcss";

@theme {
  --color-primary: #7c3aed;
  --color-secondary: #ec4899;
  --spacing-md: 1rem;
  --text-lg: 1.25rem;
}

@layer components {
  .hero-title {
    @apply text-lg font-bold text-primary;
  }

  .bs-elem-abc123 {
    @apply text-primary font-semibold;
    padding: 1.5rem 2rem;
  }
}

Refactor de clases bs-elem-*

Si el mismo conjunto de propiedades aparece en N o más elementos inline (configurable, por defecto 3), el tool lo sugiere como refactorización a una clase con nombre semántico. El log documenta el origen (post_id + element_id) de cada clase generada.

Opciones

• Umbral de refactor (refactor_threshold): número mínimo de repeticiones para sugerir refactor. Default 3.
• Tratamiento de bricks_custom_css: incluir como @layer base, omitir o exportar aparte.
• Modo de escritura: exportar archivos CSS · mantener Bricks sin cambios · ambos.

Limitaciones

• Tailwind v4 puede tener escalas más granulares que Bricks; Bricks no tiene ese nivel de granularidad, así que la conversión mantiene la simplicidad del origen.
• CSS muy específico con selectores complejos (&::before, @container) pasa como vanilla dentro del bloque.

Ver Vector B → · Ver Vector D (dirección inversa) →