Vector B · ACSS → Tailwind v4

Saca tu sistema de diseño ACSS a un archivo CSS de Tailwind v4. Útil si quieres salir del ecosistema WordPress+Bricks hacia un stack más portable.

Origen y destino

  • Origen: sitio con Bricks + ACSS activos.
  • Destino: archivo(s) CSS generados en wp-content/themes/{theme}/bricksshift/ con bloques @theme y @layer components listos para usar con Tailwind v4.

No necesitas Tailwind instalado

BricksShift genera el CSS de Tailwind v4. No requiere tailwindcss como dependencia de Node ni tailwind.config.js. Tailwind v4 es CSS-first: todo se declara con @theme dentro del CSS.

Prerequisitos

  • Bricks Builder 1.9+ activo
  • ACSS activo (origen de los datos)
  • Licencia BricksShift activa

Qué genera

Un archivo bricksshift-tailwind.css con esta estructura:

@import "tailwindcss";

@theme {
  /* Colores — valores reales de ACSS */
  --color-primary: #7c3aed;
  --color-primary-dark: #6d28d9;
  --color-secondary: #ec4899;

  /* Tipografía — escala real de ACSS */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;

  /* Spacing */
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
}

@layer components {
  .flex-center {
    @apply flex items-center justify-center;
  }

  .bg-primary-hover {
    background-color: var(--color-primary);
  }
  .bg-primary-hover:hover {
    background-color: var(--color-primary-dark);
  }
}

Sistema de mapeo

Nivel 1 — Tokens: cada token ACSS se mapea 1:1 a una custom property en @theme. Los valores son los de tu proyecto, nunca los defaults de Tailwind.

Nivel 2 — Propiedades CSS → utilities: al reconstruir las clases en @layer components, cada propiedad CSS se resuelve con @apply si tiene utility equivalente, o con CSS vanilla si no. Meta de cobertura: 85 % @apply, 15 % vanilla.

Opciones

  • Solo tokens en uso: filtra por clases presentes en _bricks_data.
  • Tratamiento del CSS custom: qué hacer con bricks_custom_css (incluir como @layer base, omitir, exportar aparte).

Qué no hace

  • No modifica Bricks. Las opciones de Bricks (bricks_global_variables etc.) quedan tal cual.
  • No configura el build de Tailwind en tu proyecto. Tú decides si procesas el CSS con el CLI de Tailwind o lo sirves como estático.

Limitaciones

  • Valores clamp() con tres argumentos no estándar pueden no mapear directamente a utilities; caen a CSS vanilla.
  • letter-spacing, container-type, box-shadow no siempre tienen utility equivalente; se resuelven con vanilla en el @layer components.

Ver Vector A → · Ver Vector C (Bricks → Tailwind) →