こんにちは！開発部エンジニアとしてフロントエンドを主に担当しています。
最近、心ときめくUIライブラリに出会いました・・・・
それは daisyUI です
今回はNext.jsでdaisyUIをさわってみた感想などをお伝えします！
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", }, }, ], }, }
まとめ
ここでご紹介した以外にも、魅力的なコンポーネントがたくさん備わっています。
皆さんも、ぜひdaisyUIでサクッとUI開発体験をしてみてください！
＊＊おまけ＊＊
コンパイルのたびに出てくるデイジーのお花もキュート🌼
おわりに
KENTEMでは、様々な拠点でフロントエンドエンジニアを大募集しています！
建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。
https://hrmos.co/pages/kentem2211/jobs/A0005hrmos.co
https://hrmos.co/pages/kentem2211/jobs/A0007hrmos.co
hrmos.co
