motivation
Svelte を使いつつ、カッコいい Web ページをサクッと作りたい
実施環境
% node -v
v20.9.0
% npm -v
10.1.0
Svelte Kit のプロジェクト作成
% 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
$ cd my-app
$ npm install
$ npm run dev
- 以下にアクセスして Welcome to SvelteKit の画面が表示されることを確認
Tailwind CSS のインストール
以下コマンドを実行する
% 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 のファイルを作成し、以下の内容を記述
@tailwind base;
@tailwind components;
@tailwind utilities;
./src/routes/+layout.svelte のファイルを作成し、以下の内容を記述
<script>
import '../app.css';
</script>
<slot />
./src/routes/+page.svelte のファイルを以下の形で更新
<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>
この状態で、サーバを起動する
% npm run dev
以下にアクセスすると、Tailwind CSS のタグが反映されていることを確認できる
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 アプリ用の適応性のあるアクセシビリティ対応のデザイン システムを作成します。
以下コマンドを実行して Skeleton をインストール
% npm i -D @skeletonlabs/skeleton @skeletonlabs/tw-plugin
以下コマンドを実行して、@types/node をインストール
For SvelteKit projects using Typescript, install the standard node type definitions.
Typescript を使用する SvelteKit プロジェクトの場合は、標準のノード タイプ定義をインストールします。
% npm add -D @types/node
tailwind.config.js を tailwind.config.ts にリネームする
% mv tailwind.config.js tailwind.config.ts
tailwind.config.ts を以下内容を更新する
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 に以下を追記する
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 lang="en" class="dark">
-
<body>タグにdata-theme="skeleton"を追加する（以下は変更後の例）
<body data-theme="skeleton" data-sveltekit-preload-data="hover" >
この状態で、サーバを起動する
% npm run dev
以下にアクセスすると、Skeleton の設定が反映されていることを確認できる
背景がなかなかカッコよくなっている。いい感じ。
あとは以下の Component のページを見ながら、いい感じにイマジネーションを働かせつつページを作れるとよい