1. get started
  2. ›
  3. Installation
  4. ›
  5. vite svelte
LLM

Vite + Svelte

Install and configure Skeleton for Vite + Svelte.

contentType: get-started
featureName: installation

Requirements

ToolingMinimum Supported
Vite 6
Svelte 5
Tailwind 4

Installation

1

Create a Project

Start by creating a new Vite project. This will install Svelte and Typescript.

npm create vite@latest
	- Set your project named as desired
	- Set Svelte as the framework
	- Set Typescript as the variant
cd {yourProjectName}
npm install
2

Install Skeleton

Install the Skeleton core and Svelte component packages.

npm i -D @skeletonlabs/skeleton @skeletonlabs/skeleton-svelte
3

Install Tailwind

Install Tailwind and and the Tailwind Vite plugin.

npm install tailwindcss @tailwindcss/vite

Implement the plugin in vite.config in the root of your project.

import { defineConfig } from "vite";
import svelte from "@vitejs/plugin-svelte";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
	plugins: [
		tailwindcss(),
		svelte() // <-- Must come after Tailwind
	],
});
4

Configure Tailwind

Open your global styleshset in /src/app.css and append the following at the top of the file.

@import 'tailwindcss';

@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton-svelte';
@import '@skeletonlabs/skeleton/themes/cerberus';
5

Set the Active Theme

Open index.html, then set the data-theme attribute on the HTML tag to define the active theme.

<html data-theme="cerberus">...</html>

Done

Start the dev server using the following command.

npm run dev