daisy UIとは？
daisy UIは、Tailwind CSSベースのCSSライブラリです。Bootstrapのような使い勝手で、さまざまなコンポーネントを簡単に実装できます。
daisyUI — Tailwind CSS Components ( version 4 update is here )
特徴
コードが簡潔で、スタイル適用が爆速
daisyUIを使うことで、Tailwindのみを使う場合よりも、少ないコードで同じUIを作成できます。
- Tailwindのみの場合:
- Tailwind + daisyUIを使用した場合:
豊富なテーマ
daisyUIには多彩なテーマが用意されており、デザインのバリエーションが広がります。
- テーマ一覧
daisyUI themes
- Theme Generator
さらに、テーマのカスタマイズも可能です。公式サイトのTheme Generatorを使えば、リアルタイムでコンポーネントの色を決められます。
実際に使ってみる
1. Tailwindのインストール
まず、Tailwind CSSをインストールします。
npm install -D tailwindcss
// tailwind.config.js ファイルを作成
npx tailwindcss init
Tailwindが効かないとき
Tailwindがうまく適用されない場合は、postcssのインストールを確認しましょう。
参考: React(Next.js)でTailwindが効かないときにみるべきところ - Qiita
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
2. daisyUIのインストール
次に、daisyUIをインストールし Tailwind CSSプラグインとして追加します。
npm i -D daisyui@latest
// tailwind.config.js
plugins: [
require('daisyui'),
],
3. テーマ設定
使用したいテーマを設定します。
// tailwind.config.js
daisyui: {
themes: ["cupcake"],
},
4. コンポーネントを使ってみる
必要なclassNameを記述するだけで、テーマに沿ったボタンが作成できます。
<button className="btn btn-primary">Button</button>
daisyUIを使って作成した天気アプリのスクリーンショットです。
