【Everyday Next.js】8. daisyUI

daisyUI

今回は、Next.js の公式ドキュメントを離れて、daisyui を導入する。

daisyui.com

daisyUI とは

daisyUI は、Tailwind CSS をベースにしたコンポーネントライブラリである。

GitHub の tailwind タグでスター数が３番目に多いライブラリになっている。

１番目は、Tailwind CSS 本家。

２番目は、UI コンポーネントライブラリである Radix UI と、Tailwind CSS をベースとした「shadcn-ui」。

つまり、純粋な Tailwind CSS のコンポーネントライブラリの中では現状最も有名ということになる。

導入方法

1. daisyUI をインストール

npm i -D daisyui

1. tailwind.config.ts に追加

// tailwind.config.ts
module.exports = {
  //...
  plugins: [require('daisyui')],
};

以上。

使い方

例えば、ただの Tailwind CSS で一般的なボタンを実装しようとすると、以下のようにとても長い class を書く必要がある。

（色つけてパディングつけてテキストのサイズ指定してホバー時色が濃くなるようにして…）

<button
  className="inline-block cursor-pointer rounded-md bg-gray-800 px-4 py-3 text-center text-sm font-semibold text-white transition duration-200 ease-in-out hover:bg-gray-900"
>
  Button
</button>

これが daisyUI を使用すると以下の通り。

<button class="btn btn-neutral">Button</button>

daisyUI のコンポーネントをベースに、Tailwind CSS ユーティリティクラスで一部変更も可能

<button class="btn w-64 rounded-full">Button</button>

基本的には、daisyUI のコンポーネントページで使いたいコンポーネントを探してコピペすれば OK。

daisyui.com

Button や Card や Checkbox や Drawer など、よく使う UI は大体揃っている。

おわりに

今回は、Next.js に daisyUI を導入した。 次回は、ダイナミックルーティングなど。