Get Started

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

Create Your Project

We highly recommend the Skeleton CLI for creating new Skeleton projects. This will automatically scaffold a new SvelteKit application, install Tailwind, configure Skeleton, and more.

console 
npm create skeleton-app@latest my-skeleton-app
	- Enable Typescript when prompted (recommended)
cd my-skeleton-app

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 you 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 →