SvelteKit - Skeleton

WARNING: this page is a preview. Skeleton v3 is not yet available. The following instructions will fail.

Create a Project

Start by creating a new project using create-svelte-app:

npm create svelte@latest my-skeleton-app
cd my-skeleton-app
npm install
npm run dev -- --open

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
npm install

Configure Tailwind

Open tailwind.config.js, then implement the highlighted snippets below.

import { join } from 'path';
import { skeleton } from '@skeletonlabs/skeleton';
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 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.