Migración

Remover el plugin de Spartan

En tu tailwind.config.js, elimina la ruta de contenido de Spartan y su plugin:

module.exports = {
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}',
-   'node_modules/@placetopay/spartan-vue/dist/**/*.js',
  ],
  plugins: [
-   require('@placetopay/spartan-vue/plugin'),
  ],
}

Ejecutar la herramienta de actualización de TailwindCSS

Usa la herramienta oficial de migración de TailwindCSS para actualizar tu proyecto automáticamente:

npx @tailwindcss/upgrade

pnpm dlx @tailwindcss/upgrade

yarn dlx @tailwindcss/upgrade

Esta herramienta se encarga automáticamente de:

• Migrar tu tailwind.config.js a configuración basada en CSS
• Actualizar las clases de utilidades que cambiaron
• Identificar incompatibilidades

Remover la configuración de PostCSS (si la usas)

Si estabas usando PostCSS con TailwindCSS 3, elimina el archivo de configuración y las dependencias:

rm postcss.config.js

{
  "devDependencies": {
-   "@tailwindcss/postcss": "^4.1.18",
-   "postcss": "^8.4.33",
  }
}

Instalar el plugin de Vite de TailwindCSS (si usas Vite)

Si tu proyecto usa Vite, instala el plugin oficial de TailwindCSS para Vite:

npm install -D @tailwindcss/vite

pnpm add -D @tailwindcss/vite

yarn add --dev @tailwindcss/vite

Y agrégalo a tu configuración de Vite:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})

Actualizar Spartan a 3.x

Instala la última versión de Spartan:

npm install @placetopay/spartan-vue@latest

pnpm add @placetopay/spartan-vue@latest

yarn add @placetopay/spartan-vue@latest

Actualizar los imports de estilos

Hay dos cambios en cómo se importan los estilos. Primero, remove el import de CSS que tenías en tu entry point:

- import '@placetopay/spartan-vue/style.css'
  import { createApp } from 'vue'
  import App from './App.vue'

Luego, agrega el import de Spartan en tu archivo de estilos CSS principal:

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

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

E importa ese archivo de estilos desde tu entry point:

import './styles.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Actualizar imports de colores de Tailwind (si los usas)

TailwindCSS 4 cambió la forma de exportar colores. Si importabas colores de Tailwind en archivos JS/TS:

- // Tailwind 3 (ya no funciona)
- import { red, blue } from 'tailwindcss/colors'

+ // Tailwind 4
+ import colors from 'tailwindcss/colors'
+
+ const red = colors.red
+ const blue = colors.blue

Verificar y testear

Realiza un build y levanta el servidor de desarrollo para validar que todo funciona:

npm run build
npm run dev

Revisa visualmente tu aplicación para asegurarte de que todos los estilos se aplican correctamente.