Requirements
Installation
1
Create a Project
Use the Svelte CLI to generate a new SvelteKit project.
npx sv create --types ts my-skeleton-app
cd my-skeleton-app
NOTE: If you did not select the options to add Tailwind, use
npx sv add tailwindcssto add it retroactively.
2
Install Skeleton
Install the Skeleton core and Svelte component packages.
npm i -D @skeletonlabs/skeleton @skeletonlabs/skeleton-svelte
3
Configure Tailwind
Open your global stylesheet in /src/routes/layout.css and add the following imports:
@import 'tailwindcss';
@import '@skeletonlabs/skeleton'; /* [!code ++] */
@import '@skeletonlabs/skeleton-svelte'; /* [!code ++] */
@import '@skeletonlabs/skeleton/themes/cerberus'; /* [!code ++] */
4
Set Active Theme
Open /src/app.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