Closed4
Bun+Sveltekit+Tailwind CSS+Storybookの環境構築
Creating a project
これ以降はBunを使用する。
bun create svelte@latest
bun install
bun run dev
Tailwind CSS
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 />
Storybook
bunx storybook@latest init
bun install
bun run storybook
StorybookはまだBunに対応していないため、package-lock.json
が生成されるが、無視してbun.lockb
を更新する。
.eslintrc.cjs
@@ -6,6 +6,7 @@
"plugin:@typescript-eslint/recommended",
"plugin:svelte/recommended",
"prettier",
+ "plugin:storybook/recommended"
],
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
このスクラップは2024/01/11にクローズされました