Svelte Kit - TailwindCSS - Skeleton の初期設定

## motivation

Svelte を使いつつ、カッコいい Web ページをサクッと作りたい

## 実施環境

```
% node -v
v20.9.0
% npm -v
10.1.0
```


## Svelte Kit のプロジェクト作成

- https://kit.svelte.jp/

```shell
% npm create svelte@latest my-app
```

- 「Which Svelte app template?」では以下を選択
  - Skeleton project
- 「Add type checking with TypeScript?」では以下を選択
  - Yes, using TypeScript syntax
- 「Select additional options (use arrow keys/space bar)」では以下を選択
  - Add ESLint for code linting
  - Add Prettier for code formatting

```shell
$ cd my-app
$ npm install
$ npm run dev
```

- 以下にアクセスして Welcome to SvelteKit の画面が表示されることを確認
  - http://localhost:5173/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435607/f0c869ce-206d-e220-4485-41ed2d7be87d.png)

## Tailwind CSS のインストール

- https://tailwindcss.com/docs/guides/sveltekit

以下コマンドを実行する

```shell
% npm install -D tailwindcss postcss autoprefixer
% npx tailwindcss init -p
Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js
```

`svelte.config.js` にて変更を行うと公式ドキュメントには書いてあったが、すでに変更後の内容になっており、変更不要だと思われる


`tailwind.config.js` にて以下の変更を行う

```
- content: [],
+ content: ["./src/**/*.{html,js}"],
```

`src/app.css` のファイルを作成し、以下の内容を記述

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

`./src/routes/+layout.svelte` のファイルを作成し、以下の内容を記述

```html
<script>
	import '../app.css';
</script>

<slot />
```

`./src/routes/+page.svelte` のファイルを以下の形で更新

```html
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
```

この状態で、サーバを起動する

```shell
% npm run dev
```

以下にアクセスすると、Tailwind CSS のタグが反映されていることを確認できる

- http://localhost:5173/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435607/976139b7-4369-7721-7b23-8a44d6c2bbd5.png)


## Skeleton のインストール

> A powerful UI toolkit built using Svelte and Tailwind CSS. Create adaptive, accessible design systems for your web apps.

Svelte および Tailwind CSS を使用して構築された強力な UI ツールキット。 Web アプリ用の適応性のあるアクセシビリティ対応のデザイン システムを作成します。

- https://www.skeleton.dev/docs/get-started

以下コマンドを実行して Skeleton をインストール

```shell
% npm i -D @skeletonlabs/skeleton @skeletonlabs/tw-plugin
```

以下コマンドを実行して、`@types/node` をインストール

> For SvelteKit projects using Typescript, install the standard node type definitions.

Typescript を使用する SvelteKit プロジェクトの場合は、標準のノード タイプ定義をインストールします。

```shell
% npm add -D @types/node
```

`tailwind.config.js` を `tailwind.config.ts` にリネームする

```shell
% mv tailwind.config.js tailwind.config.ts
```

`tailwind.config.ts` を以下内容を更新する

```typescript
import { join } from 'path';
import type { Config } from 'tailwindcss';

import { skeleton } from '@skeletonlabs/tw-plugin';

const config = {
	darkMode: 'class',
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		join(require.resolve(
			'@skeletonlabs/skeleton'),
			'../**/*.{html,js,svelte,ts}'
		)
	],
	theme: {
		extend: {},
	},
	plugins: [
		skeleton({
            themes: { preset: [ "skeleton" ] }
        })
	]
} satisfies Config;

export default config;
```

`./src/app.css` に以下を追記する

```css
html,
body {
	@apply h-full;
}
body {
	background-image: radial-gradient(
			at 0% 0%,
			rgba(var(--color-secondary-500) / 0.33) 0px,
			transparent 50%
		),
		radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
```

`./src/app.html` において以下変更を行う

- `<head>` タグに `class="dark"` を追加する（以下は変更後の例）

```html
<html lang="en" class="dark">
```

- `<body>` タグに `data-theme="skeleton"` を追加する（以下は変更後の例）

```html
<body data-theme="skeleton" data-sveltekit-preload-data="hover" >
```

この状態で、サーバを起動する

```shell
% npm run dev
```

以下にアクセスすると、Skeleton の設定が反映されていることを確認できる

- http://localhost:5173/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1435607/3305e873-82e6-d304-f2b6-bfe1783a7979.png)

背景がなかなかカッコよくなっている。いい感じ。

あとは以下の Component のページを見ながら、いい感じにイマジネーションを働かせつつページを作れるとよい

- https://www.skeleton.dev/components/file-buttons