Requirements
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 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"; // [!code ++]
export default defineConfig({
plugins: [
tailwindcss(), // [!code ++]
svelte() // <-- Must come after Tailwind
],
});
4
Configure Tailwind
Open your global stylesheet in /src/app.css and append the following at the top of the file.
@import 'tailwindcss';
@import '@skeletonlabs/skeleton'; /* [!code ++] */
@import '@skeletonlabs/skeleton-svelte'; /* [!code ++] */
@import '@skeletonlabs/skeleton/themes/cerberus'; /* [!code ++] */
5
Set the Active Theme
Open index.html, then set the data-theme attribute on the HTML tag to define the active theme.
<!-- [!code word:data-theme="cerberus"] -->
<html data-theme="cerberus">
<!-- ... -->
</html>
Done
Start the dev server using the following command.
npm run dev