Solución de problemas

Los estilos de los componentes no se aplican

Este es el problema más frecuente durante la integración. Verifica los siguientes puntos:

El @import de Spartan no está en tu archivo CSS

En TailwindCSS v4 los estilos de Spartan se incluyen mediante un @import en tu archivo de estilos principal. Si este está faltando, ningún estilo de los componentes será generado.

Solución: Asegúrate de que tu archivo de estilos incluye el import:

@import "@placetopay/spartan-vue/styles.css"; /* ✅ debe estar presente */

@source '../src/**/*.{vue,js,ts}';

La directiva @source no está configurada

TailwindCSS v4 necesita saber qué archivos escanear para generar las clases. Sin @source, solo genera las clases que encuentre dentro de las importaciones CSS.

Solución: Agrega la directiva @source con las rutas de tus archivos:

@import "@placetopay/spartan-vue/styles.css";

@source '../src/**/*.{vue,js,ts}'; /* ✅ debe incluir tus archivos Vue */

El archivo de estilos no está importado

Si styles.css no se importa en tu entry point, los estilos nunca se cargarán en la aplicación.

Solución: Importa el archivo en main.ts:

import './styles.css' // debe ser la primera importación

Los textos internos de los componentes no se traducen

Algunos componentes de Spartan incluyen texto por defecto (por ejemplo, botones de confirmación o placeholders). Si estos textos aparecen en inglés, es probable que vue-i18n no esté configurado correctamente.

Solución: Revisa la guía de configuración i18n y asegúrate de que:

1. vue-i18n está instalado y registrado como plugin
2. Las traducciones de Spartan están importadas desde @placetopay/spartan-vue/locales
3. El modo legacy: false está habilitado

Los colores primarios no se aplican

Si los componentes muestran un color diferente al que configuraste, verifica la ubicación y formato de tu bloque @theme.

@theme ubicado antes del @import

Las variables de @theme deben definirse después del @import de Spartan para que sobreescriban los valores por defecto.

Solución: Asegúrate del orden correcto en tu archivo de estilos:

@import "@placetopay/spartan-vue/styles.css";

@source '../src/**/*.{vue,js,ts}';

/* ✅ @theme después del @import */
@theme {
  --color-spartan-primary-500: rgb(33 150 243);
}

Formato de variable de color incorrecto

Los valores de las variables de color deben usar el formato RGB sin commas:

/* ❌ Incorrecto */
--color-spartan-primary-500: rgb(33, 150, 243);

/* ✅ Correcto */
--color-spartan-primary-500: rgb(33 150 243);

Errores de TypeScript

"Module not found: @placetopay/spartan-vue"

Este error indica que el paquete no está instalado correctamente. Reinstala:

npm install -D @placetopay/spartan-vue

pnpm add -D @placetopay/spartan-vue

yarn add --dev @placetopay/spartan-vue

Y verifica que el paquete aparezca en node_modules/@placetopay/spartan-vue/.

Tipos no reconocidos en componentes importados

Si TypeScript no reconoce los tipos de los componentes de Spartan, asegúrate de que tu tsconfig.json no excluye explícitamente la carpeta node_modules/@placetopay/spartan-vue.

Problemas con pnpm

Si estás usando pnpm como gestor de paquetes y encuentras errores de resolución de módulos, habilita el hoisting:

shamefully-hoist=true

Este ajuste genera una estructura plana de node_modules similar a la de npm, resolviendo la mayoría de los problemas de compatibilidad.