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
frontend@0.0.1 /home/frederic/dev/myproject/frontend
├── @floating-ui/dom@1.7.4
├── @jamescoyle/svelte-icon@0.1.1
├── @mdi/js@7.4.47
├── @skeletonlabs/skeleton@2.11.0
├── @skeletonlabs/tw-plugin@0.4.1
├── @sveltejs/adapter-static@3.0.10
├── @sveltejs/kit@2.49.0
├── @sveltejs/vite-plugin-svelte@3.1.2
├── @types/eslint@9.6.1
├── @types/node@22.19.1
├── @types/uuid@10.0.0
├── @typescript-eslint/eslint-plugin@8.48.0
├── @typescript-eslint/parser@8.48.0
├── @xyflow/svelte@0.1.39
├── autoprefixer@10.4.22
├── eslint-config-prettier@9.1.2
├── eslint-plugin-svelte@2.46.1
├── eslint@9.39.1
├── i18next@23.16.8
├── postcss@8.5.6
├── prettier-plugin-svelte@3.4.0
├── prettier-plugin-tailwindcss@0.6.14
├── prettier@3.7.1
├── split.js@1.6.5
├── svelte-check@4.3.4
├── svelte-headless-table@0.18.3
├── svelte-i18next@2.2.2
├── svelte@4.2.20
├── tailwindcss@3.4.18
├── tslib@2.8.1
├── typescript@5.9.3
├── uuid@10.0.0
└── vite@5.4.21

After:

frederic@frederic-ThinkStation-P620:~/dev/myproject/frontend$ npm list
frontend@0.0.1 /home/frederic/dev/myproject/frontend
├── @floating-ui/dom@1.7.4
├── @humanspeak/svelte-headless-table@6.0.1
├── @jamescoyle/svelte-icon@0.1.1
├── @mdi/js@7.4.47
├── @skeletonlabs/skeleton-svelte@4.6.1
├── @skeletonlabs/skeleton@4.6.1
├── @skeletonlabs/tw-plugin@0.4.1
├── @sveltejs/adapter-static@3.0.10
├── @sveltejs/kit@2.49.0
├── @sveltejs/vite-plugin-svelte@6.2.1
├── @tailwindcss/forms@0.5.10
├── @tailwindcss/typography@0.5.19
├── @tailwindcss/vite@4.1.17
├── @types/node@22.19.1
├── @types/uuid@10.0.0
├── @xyflow/svelte@1.4.2
├── autoprefixer@10.4.22
├── i18next@24.2.3
├── postcss-load-config@5.1.0
├── postcss@8.5.6
├── prettier-plugin-organize-imports@4.3.0
├── prettier-plugin-svelte@3.4.0
├── prettier-plugin-tailwindcss@0.7.1
├── prettier@3.7.1
├── split.js@1.6.5
├── svelte-check@4.3.4
├── svelte-i18next@2.2.2
├── svelte@5.45.2
├── tailwindcss@4.1.17
├── tslib@2.8.1
├── typescript@5.9.3
├── uuid@10.0.0
└── vite@6.4.1

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

[TazorDE]

What's your migration process?
First migration to v3 then to v4, or do you have another method?

[TazorDE]

But in general the issue might be resolved by this:

# The problem,
You have a named import that points at @skeletonlabs/skeleton which now only exports CSS
This causes tailwind to be confused for some unknown reason

# The fix,
Remove/migrate your named imports from V2 to their V3 equivelant, see: https://www.skeleton.dev/docs/get-started/migrate-from-v2#migrating-components

[endigo9740]

@GgFred I'll echo what @TazorDE was asking above and make sure you've consulted our guides here:

• Migrating from Skeleton v2 -> v4: https://www.skeleton.dev/docs/svelte/get-started/migrate-from-v2
• Migrating from Skeleton v3 -> v4: https://www.skeleton.dev/docs/svelte/get-started/migrate-from-v3

You should only need to follow one of these based whether you started on v2 or v3.

Make sure you follow the guide very closely - as we provide tips for avoiding scenarios where you might have outdated component throwing errors:
https://www.skeleton.dev/docs/svelte/get-started/migrate-from-v2#tips-for-component-migration

And for Tailwind issues like this specifically, make sure you're avoiding the use of Tailwind in Svelte <style> blocks where ever possible. If you have pages or your own custom rolled components that use these. Make sure you migrate these forward. You may need to supply a @reference for these to work properly, as noted in the Tailwind migration guide.
https://tailwindcss.com/docs/compatibility#vue-svelte-and-astro

Additionally, make sure you're avoiding the use of @apply in your own stylesheets. Again, we provide tips around this and recommendations in the migration guides:
https://www.skeleton.dev/docs/svelte/get-started/migrate-from-v2#replacing-apply

[GgFred]

Thank you.
I must have gotten confused because I was dealing with both the Svelte migration and the Skeleton migration at the same time. As a result, I ran into issues with SvelteFlow and other dependencies. I had reverted all my changes twice, then started over step by step, removing what was causing the most problems and redeveloping it. Everything went smoothly once I followed the recommended procedures carefully.

Thanks again for your help.