Vector D · Tailwind v4 → Bricks Nativo

Tienes un sistema de diseño en Tailwind v4 (un archivo CSS con @theme) y lo quieres replicar en Bricks para que Bricks sirva esos tokens nativamente.

Origen y destino

  • Origen: archivo CSS con @theme y, opcionalmente, @layer components. Puede estar en el tema, en uploads o subirse desde la UI.
  • Destino: paleta, variables y clases globales en la DB de Bricks.

Prerequisitos

  • Bricks Builder 1.9+ activo
  • Archivo CSS con @theme válido
  • Licencia BricksShift activa

Qué extrae el parser

ParserTailwind lee el CSS y separa:

  • Custom properties dentro de @theme { } → colores, tipografía, spacing, borders, shadows.
  • Clases dentro de @layer components { } → convertidas a clases globales de Bricks.
  • Cada @apply se descompone en sus propiedades CSS concretas combinadas con el CSS vanilla del mismo bloque.

Qué escribe

Destino BricksContenido
bricks_color_paletteColores extraídos de --color-* en @theme
bricks_global_variablesResto de tokens (typography, spacing, etc.)
bricks_global_classesClases del @layer components con sus propiedades resueltas
bricks_custom_cssTokens que no encajan en los arrays + bloques @layer base

Estrategia de reducción de escalas

Tailwind v4 puede tener paletas muy granulares (ej. --color-violet-50 a --color-violet-950, 11 steps). Bricks no representa bien estas escalas en su paleta.

BricksShift aplica una reducción basada en frecuencia de uso: los colores más usados en @layer components pasan a la paleta como "slots" principales; los menos usados caen al bricks_custom_css como CSS vars accesibles desde las clases pero fuera del selector de color de Bricks.

El log documenta qué tokens fueron promovidos a paleta y cuáles quedaron como CSS vars.

Opciones

  • Ruta del archivo CSS (css_path): path relativo al tema o upload desde la UI.
  • Estrategia de reducción: por frecuencia de uso (default) o manual (elige tú qué tokens entran en paleta).

Ejemplo

Origen:

@import "tailwindcss";

@theme {
  --color-primary: #7c3aed;
  --spacing-md: 1rem;
}

@layer components {
  .hero {
    @apply text-primary p-md;
  }
}

Destino (Bricks wp_options):

$bricks_color_palette = [
  [ 'id' => 'primary', 'name' => 'Primary', 'hex' => '#7c3aed', 'raw' => '#7c3aed' ],
];
$bricks_global_variables = [
  [ 'id' => 'spacing-md', 'name' => 'spacing-md', 'value' => '1rem' ],
];
$bricks_global_classes = [
  [ 'id' => 'hero', 'name' => 'hero', 'settings' => [
    '_color' => 'var(--color-primary)',
    '_padding' => 'var(--spacing-md)',
  ]],
];

Limitaciones

  • @apply con utilities muy específicas (arbitrary values tipo bg-[#abcdef]) no siempre se resuelven; caen a bricks_custom_css.
  • No soporta plugins de Tailwind (typography, forms): asume CSS estándar.

Ver Vector C (inversa) →