Plugin2.　FlowbiteSvelte_環境構築検証 - Paku-Soba/Svelte-example-app GitHub Wiki

Tailwind CSSプラグインとしてFlowbite Svelte環境構築検証

　◾️ Flowbite Svelteインストール及び設定方法手順

① SvelteKitプロジェクト配下にて

  • npm i -D flowbite-svelte flowbite
    • Flowbite Svelteをインストールするコマンドを実行する。

② 「tailwind.config.js」設定ファイルにて

  • module.exports = { content: ['./src/**/*.{html,js,svelte,ts}','./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'], //... plugins: [require('daisyui', 'flowbite/plugin')], };
    • contentプロパティにflowbite-svelteモジュールを追記する。
    • プラグインとしてflowbiteを追記する。

③ npm run dev -- --openコマンドを実行、プロジェクトを起動フレームワーク反映を確認する。

  • FlowbiteSvelteインストール及び設定方法は、公式ドキュメントを参考にする。 
mac-mr9v2j001@CSAMC-FVFDM030P3YW Svelte-SampleApp % npm install

up to date, audited 352 packages in 982ms

84 packages are looking for funding
  run `npm fund` for details

2 high severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
mac-mr9v2j001@CSAMC-FVFDM030P3YW Svelte-SampleApp % npm i -D flowbite-svelte flowbite

up to date, audited 352 packages in 1s

84 packages are looking for funding
  run `npm fund` for details

2 high severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
mac-mr9v2j001@CSAMC-FVFDM030P3YW Svelte-SampleApp % npm run dev -- --open

> [email protected] dev
> vite dev --open

Re-optimizing dependencies because lockfile has changed

  VITE v5.0.10  ready in 7662 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

🌼   daisyUI 4.5.0
├─ ✔︎ 2 themes added            https://daisyui.com/docs/themes
╰─ ★ Star daisyUI on GitHub     https://github.com/saadeghi/daisyui


🌼   daisyUI 4.5.0
├─ ✔︎ 2 themes added            https://daisyui.com/docs/themes
╰─ ❤︎ Support daisyUI project:  https://opencollective.com/daisyui


🌼   daisyUI 4.5.0
├─ ✔︎ 2 themes added            https://daisyui.com/docs/themes
╰─ ❤︎ Support daisyUI project:  https://opencollective.com/daisyui

3:52:01 PM [vite] ✨ new dependencies optimized: @neoconfetti/svelte
3:52:01 PM [vite] ✨ optimized dependencies changed. reloading

Flowbite Svelteサンプルコード作成及び動作確認

  • .svelteファイルにてFlowbite Svelte_コンポーネントを使用したサンプルコード作成。
  • ブラウザ上にてFlowbite Svelte_コンポーネントでスタイリングしたページの動作確認済み。
FlowbiteSvelte.mov

◾️使用した Flowbite Svelteコンポーネント

Flowbite Svelteコンポーネント Label, Input, GradientButton, Alertサンプルコード
  • src/routes/flowbite/+page.svelte
<script>
    import { Label, Input, GradientButton, Alert } from 'flowbite-svelte';
</script>

<!-- Svelte Forms - Flowbite (Input Sizes) -->
<div class="py-5 font-mono text-4xl text-purple-500 font-bold">
    Svelte Forms - Flowbite
</div>
<div class="mb-6">
    <Label for="large-input" class="block mb-2">Large input</Label>
    <Input id="large-input" size="lg" placeholder="Large input" />
</div>
<div class="mb-6">
    <Label for="default-input" class="block mb-2">Default input</Label>
    <Input id="default-input" placeholder="Default input" />
</div>
<div class="mb-6">
    <Label for="small-input" class="block mb-2">Small input</Label>
    <Input id="small-input" size="sm" placeholder="Small input" />
</div>

<div class="flex justify-end">
<GradientButton color="purpleToPink"><a href="https://flowbite-svelte.com/docs/components/forms#Input_Sizes">Input Sizes →</a></GradientButton>
</div>


<!-- Svelte Alert - Flowbite (Default alert) -->
<div class="py-5 font-mono text-4xl text-blue-500 font-bold">
    Svelte Alert - Flowbite
</div>
<Alert>
    <span class="font-medium">Default alert!</span>
    Change a few things up and try submitting again.
</Alert>
<Alert color="blue">
    <span class="font-medium">Info alert!</span>
    Change a few things up and try submitting again.
</Alert>
<Alert color="red">
    <span class="font-medium">Danger alert!</span>
    Change a few things up and try submitting again.
</Alert>
<Alert color="green">
    <span class="font-medium">Success alert!</span>
    Change a few things up and try submitting again.
</Alert>
<Alert color="yellow">
    <span class="font-medium">Warning alert!</span>
    Change a few things up and try submitting again.
</Alert>
<Alert color="dark">
    <span class="font-medium">Dark alert!</span>
    Change a few things up and try submitting again.
</Alert>

<div class="py-5 flex justify-end">
    <GradientButton color="cyanToBlue"><a href="https://flowbite-svelte.com/docs/components/alert#Default_alert">Default alert →</a></GradientButton>
</div>

最初のインストール時エラー発生

mac-mr9v2j001@CSAMC-FVFDM030P3YW Svelte-SampleApp % npm i -D flowbite-svelte flowbite

added 20 packages, and audited 352 packages in 13s

84 packages are looking for funding
  run `npm fund` for details

2 high severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
npm notice 
npm notice New minor version of npm available! 10.2.4 -> 10.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.4.0
npm notice Run npm install -g [email protected] to update!
npm notice 
mac-mr9v2j001@CSAMC-FVFDM030P3YW Svelte-SampleApp % npm install

up to date, audited 352 packages in 982ms

84 packages are looking for funding
  run `npm fund` for details

2 high severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

2 high severity vulnerabilities

⚠️ **GitHub.com Fallback** ⚠️