Get Started

Please be aware that Skeleton currently only supports Svelte applications built using SvelteKit. We recommend at least moderate experience with Svelte, SvelteKit, and Tailwind CSS before your proceed.

Install Skeleton

Skeleton CLI

Manual Install

If you're creating a new project we highly recommend this option. The CLI will not only scaffold a new SvelteKit project for you, but automatically configure Skeleton, install Tailwind, and add optional dependencies on demand.

console

npm create skeleton-app@latest my-skeleton-app
	- Enable SvelteKit's Typescript syntax (recommended)
cd my-skeleton-app

Tailwind CSS

Skeleton features tight integration with Tailwind CSS.

Skeleton CLI

Manual Install

The CLI will automatically install and configure Tailwind and PostCSS within your project.

Themes

Themes integrate with Tailwind to support color opacity and dark mode, as well as Skeleton's design tokens.

Preset Themes

Skeleton provides a number of preset themes out of the box. Select a theme to update the instruction below.

First, enable the theme in your tailwind.config.[cjs|js|ts] found in the root of your project.

typescript

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

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

html

<body data-theme="skeleton">

Learn more about Skeleton themes in this comprehensive guide.

Themes →

Ready to create a custom theme? Try the Theme Generator.

Generator →