Upgrade issues: Svelte 5 + Tailwind 4 + Skeleton 4 — Build and Prettier errors

[GgFred]

Hi everyone,

I’m currently stuck while migrating a project to Svelte 5.45.2, Tailwind CSS 4.1.17, and Skeleton UI 4.6.1. I’ve successfully migrated other projects, but this one is giving me persistent build and formatting errors.

I’m upgrading a project to:

• Svelte 5.45.2
• Tailwind CSS 4.1.17
• Skeleton UI 4.6.1

Before:

frederic@frederic-ThinkStation-P620:~/dev/myproject/frontend$ npm list
[email protected] /home/frederic/dev/myproject/frontend
├── @floating-ui/[email protected]
├── @jamescoyle/[email protected]
├── @mdi/[email protected]
├── @skeletonlabs/[email protected]
├── @skeletonlabs/[email protected]
├── @sveltejs/[email protected]
├── @sveltejs/[email protected]
├── @sveltejs/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @typescript-eslint/[email protected]
├── @typescript-eslint/[email protected]
├── @xyflow/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

After:

frederic@frederic-ThinkStation-P620:~/dev/myproject/frontend$ npm list
[email protected] /home/frederic/dev/myproject/frontend
├── @floating-ui/[email protected]
├── @humanspeak/[email protected]
├── @jamescoyle/[email protected]
├── @mdi/[email protected]
├── @skeletonlabs/[email protected]
├── @skeletonlabs/[email protected]
├── @skeletonlabs/[email protected]
├── @sveltejs/[email protected]
├── @sveltejs/[email protected]
├── @sveltejs/[email protected]
├── @tailwindcss/[email protected]
├── @tailwindcss/[email protected]
├── @tailwindcss/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @xyflow/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Build Error:

When running npm run build, I get:

[@tailwindcss/vite:generate:build] Cannot use @variant with unknown variant: md
file: /home/frederic/dev/myproject/frontend/node_modules/@skeletonlabs/skeleton/dist/index.css

Prettier Errors:

Running npm run format fails with:

TypeError: getVisitorKeys is not a function or its return value is not iterable

I’ve tried to:

• Delete node_modules and package-lock.json, reinstall, update, and rebuild.
• Search for similar issues, try AI-assisted debugging, and checked documentation.
• ensure all plugins and dependencies are compatible with the new versions.

Has anyone encountered and resolved these specific issues during migration?
If you’ve successfully migrated a similar stack (Svelte 5 + Tailwind 4 + Skeleton 4) or have deep knowledge of these tools, I’d love your help to:

• Identify the root cause of the @variant error in Skeleton UI
• Fix the Prettier formatting issues
• Share debugging tips or configuration tweaks that worked for you

Any insights or pointers would be greatly appreciated.

build.log

format.log

[rozsazoltan]

Unfortunately, the AI isn't very smart in the newer versions. Could you share a public configuration or GitHub repo that reproduces the bug?

It seems like you might have removed the md breakpoint, for example, like this:

• https://play.tailwindcss.com/UX72ccT3KS?file=css

@theme {
  --breakpoint-*: initial; /* remove all breakpoints by default */
}

If you set it to initial, you remove that variant in TailwindCSS. Naturally, if you removed the md breakpoint in the way mentioned, you can't reference it anymore, and you'll have to redeclare it.