daisyUIでサクッとポップな画面作成

こんにちは！開発部エンジニアの高野です。
フロントエンドを主に担当しています。
最近、心ときめくUIライブラリに出会いました・・・・
それは　daisyUI　です

今回はNext.jsでdaisyUIをさわってみた感想などをお伝えします！

daisyUIとは？
ライブラリのインストール
表示してみる
おすすめポイント
- JS不要でサクサク軽量
- テーマが設定できる
まとめ
おわりに

daisyUIとは？

TailwindCSSのプラグインとして使用できる、CSSライブラリです。
daisyUIには様々なコンポーネントが用意されています。
TailwindCSSを使用するとクラス名の記述が多くなりがちですが、
daisyUIを使うと少しのクラスをあてるだけできれいなUIを作成することができます。

daisyui.com 公式サイトもポップでキュート♡

ライブラリのインストール

npm install daisyui

（TailwindCSSも別途インストールしておきます）

プラグインとして使用するため、tailwind.config.jsファイルにdaisyUI を追加します。

module.exports = {
  //...
  plugins: [require("daisyui")],
}

表示してみる

試しに、いくつかのコンポーネントを表示してみます。

ボタン

See the Pen Untitled by タカノユイ (@gembsjqm-the-animator) on CodePen.

ドロップダウン

See the Pen Untitled by タカノユイ (@gembsjqm-the-animator) on CodePen.

モーダル

See the Pen Modalサンプル by タカノユイ (@gembsjqm-the-animator) on CodePen.

範囲スライダー

See the Pen Untitled by タカノユイ (@gembsjqm-the-animator) on CodePen.

おすすめポイント

JS不要でサクサク軽量

上で表示しているコンポーネントを見ていただいてもわかる通り、Javascriptを一切使用していません。
CSSの機能のみで動作しているので、とっても軽量です。

テーマが設定できる

daisyUIには、デフォルトで29種類のテーマが設定されています。
テーマの適用はとても簡単です。HTML要素に data-theme='THEME_NAME' を追加するだけで、その子要素にテーマが適用されます。

<html data-theme="cupcake"></html>

また、自分でテーマをカスタマイズすることも可能です。

module.exports = {
  daisyui: {
      themes: [
        {
          mytheme: {
            "primary": "#4f96dd",
            "secondary": "#ea46b9",
            "accent": "#c3e88d",
            "neutral": "#2b293d",
            "base-100": "#f8f9fc",
            "info": "#afdce9",
            "success": "#81dfd6",
            "warning": "#d98908",
            "error": "#e56a61",
          },
        },
      ],
    },
}