SvelteKit - Skeleton

WARNING: This will install an early preview build of Skeleton v3 using Svelte 5. Please be aware that some features may be missing, incomplete, or non-functional at this time. Report bugs and issues to GitHub or Discord.

Create a Project

Start by creating a new Svelte 5 project using create-svelte:

npm create svelte@latest my-skeleton-app
    - Addtional Options > Svelte 5 Preview (required!)
cd my-skeleton-app
npm install

Install Skeleton

Install the Skeleton core and Skeleton Svelte packages.

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

Install Tailwind

Install Tailwind using Svelte-Add to automate the process.

npx svelte-add@latest tailwindcss --tailwindcss-typography false

NOTE: if you see “something went wrong”, everything will work as expected. Please proceed to the next step.

Configure Tailwind

You may optionally install the @types/node package to prevent LSP errors in your Tailwind config.

npm i --save-dev @types/node

Open tailwind.config in the root of your project and make these changes:

import type { Config } from 'tailwindcss';

import { join } from 'path';
import { skeleton } from '@skeletonlabs/skeleton/plugin';
import * as themes from '@skeletonlabs/skeleton/themes';

/** @type {import('tailwindcss').Config} \*/
export default {
    content: [
        './src/**/*.{html,js,svelte,ts}',
        join(require.resolve('@skeletonlabs/skeleton-svelte'), '../**/*.{html,js,svelte,ts}')
    ],
    theme: {
        extend: {},
    },
    plugins: [
        skeleton({
            themes: [ themes.cerberus, themes.rose ]
        })
    ]
}

Set Active Theme

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

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

Ready

You’re now ready to begin using Skeleton.