# SvelteKit

Install and configure Skeleton for SvelteKit.

## Requirements

\| Tooling                              | Minimum Supported |
\| ------------------------------------ | ----------------- |
\| [SvelteKit](https://svelte.dev/)     | 2                 |
\| [Svelte](https://svelte.dev/)        | 5                 |
\| [Tailwind](https://tailwindcss.com/) | 4                 |

## Installation

<Process>
  <ProcessStep step="1">
    ### Create a Project

    Use the [Svelte CLI](https://svelte.dev/docs/kit/creating-a-project) to generate a new SvelteKit project.

    ```bash
    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 tailwindcss` to add it retroactively.
  </ProcessStep>

  <ProcessStep step="2">
    ### Install Skeleton

    Install the Skeleton core and Svelte component packages.

    ```bash
    npm i -D @skeletonlabs/skeleton @skeletonlabs/skeleton-svelte
    ```
  </ProcessStep>

  <ProcessStep step="3">
    ### Configure Tailwind

    Open your global stylesheet in `/src/routes/layout.css` and add the following imports:

    ```css
    @import 'tailwindcss';

    @import '@skeletonlabs/skeleton'; /* [!code ++] */
    @import '@skeletonlabs/skeleton-svelte'; /* [!code ++] */
    @import '@skeletonlabs/skeleton/themes/cerberus'; /* [!code ++] */
    ```
  </ProcessStep>

  <ProcessStep step="4">
    ### Set Active Theme

    Open `/src/app.html`, then set the `data-theme` attribute on the HTML tag to define the active theme.

    ```html
    <!-- [!code word:data-theme="cerberus"] -->
    <html data-theme="cerberus">
        <!-- ... -->
    </html>
    ```
  </ProcessStep>

  <ProcessStep step="check">
    ### Done

    Start the dev server using the following command.

    ```bash
    npm run dev
    ```
  </ProcessStep>
</Process>
