はじめに
この記事では、daisyUIの魅力を以下の項目で紹介していきます！
daisyUIとは？
daisyUIとは、TailwindCSSをベースに作られたUIライブラリです。また、TailwindCSSにそのまま拡張して使用します。そのため、TailwindCSSを使用している環境で使用します。
環境構築
環境構築は、インストール１回と簡単な記述だけで完了します！
公式ドキュメンント参考はこちらへ
- インストール
npm i -D daisyui@latest
2.dasyUIのプラグインをファイルにインポート
- TailwindCss v4 の場合
@plugin "daisyui";
- TailwindCss v3 の場合
plugins: [
require('daisyui'),
],
使い方
使い方については、公式ドキュメントを見るのがおすすめです！
6つの魅力
1. 軽量
daisyUIはTailwindCSSに拡張する形で構築されており、追加モジュールが少なく、軽量です。
HTMLとCSSのみで動作するため、JavaScriptに依存せず、SEOやアクセシビリティにも配慮できます。
2. 拡張性
TailwindCSSと同様、クラス属性に記述して使用するため、他UIライブラリよりも柔軟性が高く、デザインのカスタマイズが容易です。
3. 豊富なコンポーネント
実用性の高いものからユニークなものまで、豊富なUIコンポーネントが揃っています。
コンポーネント一覧はこちら
4. テーマカラーが利用可能
i. カラー
20種類のプリセットカラーがあり、ユースケースに応じて使い分け可能です。
https://daisyui.com/docs/colors/
ii. テーマ
32種類のテーマが用意されており、tailwind.config.js(ts)に記述することで即反映されます。
ダークモードの切り替えも簡単です。
iii. カスタムテーマ
公式サイト上でオリジナルテーマをプレビューしながら作成できます。
https://daisyui.com/theme-generator/
5. TailwindCSSの記述の簡略化
TailwindCSSの記述が冗長になりがちな点をdaisyUIがカバー。
コードの見通しが良くなり、保守性や再利用性が向上します。
6. 高速な開発体験
インストールと設定が非常にシンプルで、コンポーネントもクラスを追加するだけですぐ使えます。
また、公式ドキュメントで挙動を確認できるため、開発スピードが大幅に向上します。
最後に
daisyUIの魅力は伝わりましたか？
ぜひ、個人開発やハッカソンなど、小規模なアプリケーション開発に取り入れてみてください！