Closed4

Bun+Sveltekit+Tailwind CSS+Storybookの環境構築

3w36zj63w36zj6

Tailwind CSS

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

bun install --dev tailwindcss postcss autoprefixer
bunx tailwindcss init -p
tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [],
+  content: ["./src/**/*.{html,js,svelte,ts}"],
   theme: {
     extend: {}
   },
src/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
src/routes/+layout.svelte
@@ -0,0 +1,5 @@
+<script>
+  import "../app.css"
+</script>
+
+<slot />
3w36zj63w36zj6

Storybook

https://storybook.js.org/docs/get-started/install

bunx storybook@latest init
bun install
bun run storybook

StorybookはまだBunに対応していないため、package-lock.jsonが生成されるが、無視してbun.lockbを更新する。

https://github.com/storybookjs/storybook/issues/25389

.eslintrc.cjs
@@ -6,6 +6,7 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:svelte/recommended",
     "prettier",
+    "plugin:storybook/recommended"
   ],
   parser: "@typescript-eslint/parser",
   plugins: ["@typescript-eslint"],
このスクラップは4ヶ月前にクローズされました