Daisy UI を使用した Tailwind CSS の CDN 配信方法

Daisy UI は、Tailwind CSS のプラグインであり、より便利なクラスやコンポーネントを提供します。CDN (Content Delivery Network) を使用することで、必要なファイルをローカルにダウンロードせずに直接読み込むことができます。

まず、Daisy UI と Tailwind CSS を CDN から読み込むために、以下のコードを <head> タグ内に追加します。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet">

これにより、最新バージョンの Tailwind CSS と Daisy UI が CDN から読み込まれます。

次に、Daisy UI のクラスやコンポーネントの使用例をいくつか紹介します。

ボタンの例:

<button class="btn btn-primary">Click me</button>

フォームの例:

<form>
  <div class="form-control">
    <label class="label">
      名前
      <input type="text" class="input">
    </label>
  </div>
</form>

カードの例:

<div class="card">
  <div class="card-body">
    <h2 class="card-title">タイトル</h2>
    <p class="card-text">内容をここに記述します。</p>
  </div>
</div>

以上のように、Daisy UI を使用することで、より簡潔で美しいデザインを実現することができます。CDN を利用することで、ファイルのダウンロードや管理の手間を省くことができます。

この記事では、Daisy UI の基本的な使い方と、いくつかのコード例を紹介しました。自分のプロジェクトに導入して、効率的な開発と魅力的なデザインを実現してください。