Vite + Svelte + Tailwind CSS + daisyUI + TypeScript の環境設定
パパッとコマンドなどだけですが、こんな感じで。。。。。。
npm create vite@latest kodawari -- --template svelte-ts
cd kodawari
npm i -D tailwindcss
npm i -D daisyui
npm install
npx tailwindcss init -p
./src/app.css に追加
@tailwind base;
@tailwind components;
@tailwind utilities;
./tailwind.config.cjs を更新
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
↓
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{svelte,js,ts}'],
theme: {
extend: {},
},
plugins: [require('daisyui')],
}
./src/App.savelet を更新
<script lang="ts">
import Counter from './lib/Counter.svelte'
import Collapse from './lib/Collapse.svelte'
import Modal from './lib/Modal.svelte'
</script>
<main>
<button class="btn btn-secondary">Hello daisyui</button>
<button class="btn btn-ghost">Button</button>
<button class="btn btn-link">Button</button>
<div class="mockup-code">
<pre data-prefix="1"><code>npm i daisyui</code></pre>
<pre data-prefix="2"><code>installing...</code></pre>
<pre data-prefix="3" class="bg-warning text-warning-content"><code>Error!</code></pre>
</div>
<div class="card">
<Counter/>
</div>
<Modal/>
<Collapse/>
</main>
./lib/Collapse.svelte を追加
…