Tailwind CSS コンポーネントライブラリ「daisyUI」

フロントエンドエンジニアの岸です。
プロジェクトで daisyUI を使用したので導入方法と感想を紹介します。

Contents

daisyUIとは
- daisyUIの利点
導入
感想

daisyUIとは

daisyUI とは「TailwindCSS がベースになっているコンポーネントライブラリ」です。

TailwindCSS とは、「ユーティリティファーストで設計されたCSSフレームワーク」です。
あらかじめ用意されたCSSクラスでコーディングができるので CSS を書かなくても良くなるという利点があります。
類似のフレームワークでは、 Tachyons, Ant Designなどがあります。

TailwindCSS が提供しているCSSを使ってコンポーネントを用意したのが daisyUI です。

TailwindCSS
https://tailwindcss.com/

Tailwind CSS Cheat Sheet
https://tailwindcomponents.com/cheatsheet/

daisyUI
https://daisyui.com/

daisyUIの利点

すぐに開発が始められる
UIに統一性が出る

TailwindCSS をベースにしたUIコンポーネントが提供されているのですぐに実装を始めることができます。
また、テーマを編集することができるので柔軟にデザインを設計することができます。

当然ですが TailwindCSS のメリットも享受できます。

導入


npm install -D tailwindcss
npx tailwindcss init
npm install -D daisyui

tailwind.config.js を編集


/** @type {import('tailwindcss')
.Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

src/index.html を追加


<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="../dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

  <button class="btn btn-primary">daisyUi button</button>


</body>
</html>

src/input.css を追加


@tailwind base;
@tailwind components;
@tailwind utilities;

実行


npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

src/index.html をブラウザで確認すると daisyUI のボタンが確認できると思います。

tailwind.config.js の content でしているファイルを watch していて、新しいクラスが使用される度にCSSが生成されます。
watch 中は CSS の生成のみ行われて削除はされません。
再度上記のコマンドを実行すると差分を削除(purge)してくれます。

感想

daisyUI で提供されているUIを使うことですぐに開発を始めることができました。
タブの切り替えなどインタラクティな動きは、自前で実装する必要があるのでその点は他のUIライブラリに比べて少し手間に感じました。

TailwindCSS の利点ですが、全てのユーティリティクラスが用意されているのは便利でした。
その反面、大量のCSSクラスを使用するので html の可読性が下がります。
なので適切にコンポーネント化する必要があると感じました。

今回使用したプロジェクトは単純な html の実装だったので React のようなコンポーネント化ができなかったのですが、 @apply という機能を使用することでコンポーネントのように扱うことができました。
全てを @apply で扱うと管理が大変になりそうなので適切に CSS ファイルを分ける必要があると思います。
daisyUI のスタイルを上書きする際も @apply で行いました。

input.css に以下を追加することで newComponent というクラスだけでスタイルすることができる


@layer components {
  .newComponent {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

daisyUI で提供されていないコンポーネントは tailwindcomponents で探すといいと思います。
https://tailwindcomponents.com/

daisyUI の他にも TailwindCSS を使用したUIライブラリがあるので機会があれば試してみたいです。

Flowbite
https://flowbite.com/

Wicked Blocks
https://blocks.wickedtemplates.com/

Tail-Kit
https://www.tailwind-kit.com/