Skip to content

refactor(sveltekit-embed): drop Skeleton UI in favour of plain Tailwind v4 - #5302

Merged
ReneWerner87 merged 1 commit into
masterfrom
claude/sveltekit-embed-drop-skeleton
Aug 1, 2026
Merged

refactor(sveltekit-embed): drop Skeleton UI in favour of plain Tailwind v4#5302
ReneWerner87 merged 1 commit into
masterfrom
claude/sveltekit-embed-drop-skeleton

Conversation

@ReneWerner87

@ReneWerner87 ReneWerner87 commented Aug 1, 2026

Copy link
Copy Markdown
Member

Stacked on #5299. Base is claude/sveltekit-template-build-fix, since this needs the @sveltejs/vite-plugin-svelte and cookie fixes from that PR. Merging #5299 first retargets this to master automatically.

Completes the last broken template. Follows the direction you picked: remove Skeleton, keep plain Tailwind.

Why removing rather than migrating

sveltekit-embed has not built since @skeletonlabs/skeleton was bumped 2 to 5. v5 removed AppShell, AppBar, LightSwitch, CodeBlock and storeHighlightJs, along with the tailwind/skeleton.cjs and styles/skeleton.css entry points this recipe imported. The package now exports only ., ./package.json and ./themes/*.

Every component the layout used has to be hand-written either way, so the dependency was no longer paying for itself. This recipe exists to show Fiber serving an embedded SvelteKit build, not to demonstrate a component library.

Removing it also takes @tailwindcss/forms, @tailwindcss/typography (pulled in only for Skeleton) and @floating-ui/dom (a Skeleton peer) out of the tree, four fewer dependencies to break on the next major.

Replacements

Two small components in src/lib:

  • CodeBlock.svelte renders highlight.js output with an optional line-number gutter, keeping the same lineNumbers / language / code / rounded props the call sites already passed, so +page.svelte needed no prop changes.
  • LightSwitch.svelte toggles a dark class on the root element, remembers the choice in localStorage, falls back to prefers-color-scheme.

The Skeleton utility classes the markup relied on (h1, h3, blockquote, card, btn variant-outline-primary) are replaced with plain Tailwind. The primary palette Skeleton's theme provided is declared in an @theme block, so bg-primary-200, text-primary-900 and friends keep working unchanged.

Also in here

  • Tailwind v4 migration, the same one entgo-sveltekit got in fix(sveltekit): repair entgo-sveltekit build and bound the cookie override #5299: the @tailwindcss/vite plugin replaces the v3-style PostCSS setup. postcss.config.cjs, tailwind.config.cjs, postcss and autoprefixer are removed as redundant under v4.
  • src/app.postcss renamed to src/app.css. The .postcss extension made Vite route the file through postcss-import, which tries to resolve @import "tailwindcss" as a file path and dies with ENOENT. The Vite plugin only claims .css. This is why entgo-sveltekit worked with the identical config and this template did not.
  • Fixed the two self-closing <span /> tags Svelte 5 warns about, since the file was being touched anyway.

Verification

  • pnpm run build completes, the template builds for the first time in a while
  • pnpm install --frozen-lockfile passes
  • OSV scan of the refreshed lockfile: clean
  • no skeletonlabs references left outside the lockfile

Visually close to the original but not pixel-identical. The header, footer button and browser mockup are rebuilt with Tailwind equivalents rather than Skeleton's component styling.

…nd v4

The template has not built since @skeletonlabs/skeleton was bumped 2 -> 5.
v5 removed AppShell, AppBar, LightSwitch, CodeBlock and storeHighlightJs,
along with the `tailwind/skeleton.cjs` and `styles/skeleton.css` entry
points this recipe imported -- the package now exports only `.`,
`./package.json` and `./themes/*`. Every component the layout used has to
be hand-written either way, so the dependency was no longer paying for
itself.

This recipe exists to show Fiber serving an embedded SvelteKit build, not
to demonstrate a component library, so Skeleton is removed rather than
migrated. That also takes @tailwindcss/forms and @tailwindcss/typography
(pulled in only for Skeleton) and @floating-ui/dom (a Skeleton peer) out
of the tree.

Replacements live in src/lib:

- CodeBlock.svelte renders highlight.js output with an optional line
  number gutter, keeping the same lineNumbers/language/code/rounded props
  the call sites already passed.
- LightSwitch.svelte toggles a `dark` class on <html> and remembers the
  choice in localStorage, falling back to prefers-color-scheme.

The Skeleton classes the markup relied on (`h1`, `h3`, `blockquote`,
`card`, `btn variant-outline-primary`) are replaced with plain Tailwind,
and the primary palette Skeleton's theme provided is declared in an
`@theme` block so `bg-primary-200`, `text-primary-900` and friends keep
working.

Also completes the Tailwind v4 migration that entgo-sveltekit received
separately: the `@tailwindcss/vite` plugin replaces the v3-style PostCSS
setup, and postcss.config.cjs, tailwind.config.cjs, postcss and
autoprefixer are removed as redundant.

src/app.postcss is renamed to src/app.css. The `.postcss` extension made
Vite route the file through postcss-import, which tries to resolve
`@import "tailwindcss"` as a file path and fails with ENOENT; the Vite
plugin only claims `.css`.

`pnpm run build` and `pnpm install --frozen-lockfile` both pass. The two
self-closing `<span />` tags Svelte 5 warns about are fixed while here.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ea7bWcx58vqScAQoerh2Go
@ReneWerner87
ReneWerner87 force-pushed the claude/sveltekit-embed-drop-skeleton branch from 6b8bd4c to 45a2a5a Compare August 1, 2026 11:18
Base automatically changed from claude/sveltekit-template-build-fix to master August 1, 2026 11:26
@ReneWerner87
ReneWerner87 merged commit f6cf561 into master Aug 1, 2026
9 checks passed
@ReneWerner87
ReneWerner87 deleted the claude/sveltekit-embed-drop-skeleton branch August 1, 2026 11:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants