Get Started

We recommend at least moderate experience with Svelte, SvelteKit, and Tailwind CSS before you proceed.

Create Your Project

Install Skeleton

Install Tailwind

Add Themes

Skeleton provides several preset themes out of the box. Select a theme to learn how to implement it.

First, register your preferred theme(s) in tailwind.config.[ts|js|cjs]. This will ensure each theme is available to use.

typescript 
plugins: [
	skeleton({
		themes: { preset: [ "skeleton" ] }
	})
]

Next, open /src/app.html and set the active theme using the data-theme attribute.

html 
<body data-theme="skeleton">

Learn more about Skeleton themes and customization.

Themes Guide →

Create a custom theme using the theme generator.

Theme Generator →