Svelte + storybook + tailwind setup

install bun

npm install -g bun

Initialize Svelte

初期セットアップコマンドを以下で確認
https://svelte.jp/
npm -> bun に変更して実行
prettierrc ファイルが出来るので調整する

Initialize storybook

初期セットアップコマンドを以下で確認
https://storybook.js.org/docs/get-started/svelte-vite
npx -> bunx に変更して実行

npm で実行されてしまうので、途中で止まったら強制終了して、package-lock.json を削除して bun install を実行し直し

Initialize tailwind

初期セットアップコマンドを以下で確認
https://tailwindcss.com/docs/guides/sveltekit
npm -> bun, npx -> bunx に変更して実行

(未解決) +page.svelte のサンプルの colors.gray.100 部分が動かない

set up darkmode

tailwind の darkmode の設定を行う
https://tailwindcss.com/docs/dark-mode

storybook の theme addon の導入を行う
https://storybook.js.org/recipes/tailwindcss#3-add-a-theme-switcher-tool
npm で install されるので、package-lock.json を削除して bun install を実行し直し

app.css に以下などを反映して storybook で確認する

@layer base {
  html {
    @apply bg-white text-gray-800 dark:bg-black dark:text-gray-200;
  }
}