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

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.

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. To switch themes, open tailwind.config.[cjs|js|ts] found in the root of your project, then modify the settings as shown below. Select a theme to update the code snippet.

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

Learn how extend preset themes, customize backgrounds, and add custom fonts.

Themes →

Interested in creating your own custom theme? Try the Skeleton theme generator.

Generator →