SvelteKit - Skeleton

Requirements

Tooling	Minimum Supported
SvelteKit	2
Svelte	5
Tailwind	4

Installation

Create a Project

Use the Svelte CLI to generate a new SvelteKit project.

npx sv create --types ts my-skeleton-app
cd my-skeleton-app

NOTE: If you did not select the options to add Tailwind, use npx sv add tailwindcss to add it retroactively.

Install Skeleton

Install the Skeleton core and Svelte component packages.

npm i -D @skeletonlabs/skeleton @skeletonlabs/skeleton-svelte

Configure Tailwind

Open your global stylesheet in /src/app.css and add the following imports:

@import 'tailwindcss';

@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/optional/presets';
@import '@skeletonlabs/skeleton/themes/cerberus';

@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';

NOTE: please verify the @source path resolves to your node_modules directory.

Set Active Theme

Open /src/app.html, then set the data-theme attribute on the HTML tag to define the active theme.

<html data-theme="cerberus">...</html>

Done

Start the dev server using the following command.

npm run dev