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

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

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

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

  • npm i -D daisyui@latest
    • daisyUIをインストールするコマンドを実行する。

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

  • module.exports = { //... plugins: [require('daisyui')], };
    • プラグインとしてdaisyuiを追記する。

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

CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$ npm i -D daisyui@latest

added 4 packages, and audited 166 packages in 2s

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

found 0 vulnerabilities

CSAMC-FVFDM030P3YW:create-svelte mac-mr9v2j001$ npm run dev -- --open

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



  VITE v4.5.1  ready in 7464 ms

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

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

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

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

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

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

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

daisyUIコンポーネント Table,Badgeサンプルコード
  • create-svelte/src/routes/about/+page.svelte
...

<!-- daisyUI Components Table,Badge -->
<div class="py-5 overflow-x-auto">
　　　　　　　<table class="table-md w-full">
        <!-- head -->
	<thead>
	<tr class="bg-background02 rounded">
          <th class="text-slate-300 text-left">Class name</th>
	  <th class="text-slate-300 text-left">Type</th>
	  <th></th>
	</tr>
	</thead>
        <tbody>
	<!-- row 1 -->
	<tr>
          <td class="font-mono text-slate-200 text-left">hero</td>
	  <td class="font-mono text-slate-200 text-left"><div class="badge badge-outline">Component</div></td>
	  <td class="font-mono text-slate-200 text-left">Container element</td>
	</tr>
	<!-- row 2 -->
        <tr>
	  <td class="font-mono text-slate-200 text-left">hero-content</td>
	  <td class="font-mono text-slate-200 text-left"><div class="badge badge-outline">Component</div></td>
	  <td class="font-mono text-slate-200 text-left">Container for content</td>
	</tr>
	<!-- row 3 -->
	<tr>
	  <td class="font-mono text-slate-200 text-left">hero-overlay</td>
	  <td class="font-mono text-slate-200 text-left"><div class="badge badge-outline">Component</div></td>
	  <td class="font-mono text-slate-200 text-left">Overlay that covers the background image</td>
	</tr>
	</tbody>
   </table>
</div>

...
daisyUIコンポーネント Hero,Card,Buttonサンプルコード
  • create-svelte/src/routes/about/+page.svelte

...

<!-- daisyUI Components Hero,Card,Button -->
<div class="py-5">
  <div class="hero px-10 py-10 min-h-full rounded bg-slate-100">
    <div class="hero-content flex-col lg:flex-row-reverse">
	<div class="text-center lg:text-left">
	  <h1 class="text-5xl text-background font-bold">Login now!</h1>
	  <p class="py-6 text-background">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda 
                              excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
	</div>
	<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
	<form class="card-body">
	  <div class="form-control">
	    <label class="label">
	      <span class="label-text">Email</span>
	    </label>
	    <input type="email" placeholder="email" class="input input-bordered" required />
          </div>
	  <div class="form-control">
	    <label class="label">
	      <span class="label-text">Password</span>
	    </label>
	    <input type="password" placeholder="password" class="input input-bordered" required />
	    <label class="label">
		<a href="#" class="label-text-alt link link-hover">Forgot password?</a>
	    </label>
	  </div>
	  <div class="form-control mt-6">
	    <button class="btn bg-blue-600 hover:bg-blue-800 text-white">Login</button>
	  </div>
	</form>
	</div>
    </div>
  </div>
</div>

...
daisyUIコンポーネント Modal,Selectサンプルコード
  • create-svelte/src/routes/daisyUI/+page.svelte
...
<!-- daisyUI Components Modal,Select -->
<dialog id="my_modal_1" class="modal">
    <div class="modal-box">
        <h3 class="px-5 text-4xl font-extrabold text-background">td-da-⭐︎</h3>
            <p class="px-5 py-4　text-background text-xl">
                Choose your favorite color!</p>
        <div class="px-5">
          <select class="select select-bordered w-full">
            <option disabled selected>What your favorite color?</option>
            <option>Black</option>
            <option>Red</option>
            <option>Orange</option>
            <option>Yellow</option>
            <option>Green</option>
            <option>Sky</option>
            <option>Indigo</option>
            <option>Purple</option>
            <option>Pink</option>
          </select>
        </div>
        <div class="modal-action pr-5">
            <form method="dialog">
                <!-- if there is a button in form, it will close the modal -->
                <button class="btn px-10 bg-slate-300 text-background hover:text-accent-content/70">Choose!</button>
            </form>
        </div>
    </div>
</dialog>
...
⚠️ **GitHub.com Fallback** ⚠️