-

daisyUIについて

Tailwind CSSベースのコンポーネントライブラリ！で開発を高速化！

虎の穴ラボ 古賀広隆 (@kght6123)
ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

自己紹介

古賀 広隆（@kght6123）
Twitter/GitHub

とらのあな通販のコスト削減関連の開発に携わっています。2児の父です。

フロントエンド、サーバサイドが主な担当です。

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

あじぇんだ！

  1. daisyUIとは？
  2. クリーンなHTMLになる
  3. 細かいカスタマイズができる
  4. テーマが使える、作れる
  5. オススメのコンポーネント
  6. 最後に
ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

1. daisyUI（plugin）とは？

Tailwind CSSのコンポーネント集で、CSSの記述が楽になる下記の特徴があります。

  • HTMLをきれいに保てる
  • テーマ（26種類）があり、カスタマイズもできる
  • ピュアCSSのコンポーネント（45個）が使える
ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

2. クリーンなHTMLになる

  • コンポーネントレベルのクラスをTailwind CSSに追加
  • ユーティリティクラスのみの長いCSSになりにくい

HTMLのコードが短くてすっきりしやすくなる

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

Tailwind CSSのユーティリティクラスのみのボタン

レスポンシブ、アニメーション、カーソル、疑似要素などさまざまなユーティリティを指定して、1つのボタンが作れる。

<a class="inline-block px-4 py-3
    text-sm font-semibold text-center
    text-white uppercase transition
    duration-200 ease-in-out
    bg-indigo-600 rounded-md
    cursor-pointer
    hover:bg-indigo-700">Button</a>
<!-- 引用元: https://daisyui.com/ -->
ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

コンポーネントクラスのボタン

コンポーネントクラスのみで、1つのボタンが作れる。
さらに、ユーティリティクラスを追加と、カスタマイズも可能です。
（詳細は後述）

<a class="btn btn-primary">Button</a>
<!-- 引用元: https://daisyui.com/ -->
ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

3. 細かいカスタマイズができる！

  • Tailwind CSSのユーティリティクラスを使って、細かいカスタマイズができる。
  • @applyにdaisyUIを使ってカスタムスタイルを追加できる。
  • CSS変数を利用して、daisyUIのCSS変数をカスタマイズできる。
ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

Tailwind CSSのユーティリティクラスを使う

<a class="btn btn-primary">Button</a>

↓

<a class="btn btn-primary rounded-full">Button</a>

↓

<a class="
btn btn-primary 
rounded-full shadow-md 
border-4 border-primary-focus">Button</a>
ラクスR&D Meetup - CSSフレームワーク
daisyUIについて


↓

↓

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

Tailwind CSSの@applyを使う

.btn-primary-border {
  @apply btn btn-primary rounded-full shadow-md border-4 border-primary-focus;
}

<a class="btn-primary-border">Button</a>

↓

※ あまり命名とか使い方はイケてないですが、例ということで・・・

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

CSS変数を使う

テーマごとにtailwind.config.jsへ記載する。

  daisyui: {
    themes: [
      {
        mytheme: {
          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
          "--rounded-btn": "0.25rem",
        },
      },
    ],
  },
ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

少し角ばったのボタンにできます。

<a class="btn btn-primary">Button</a>

↓

使えるCSS変数の一覧（公式）

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

4. テーマが使える！作れる！

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

別のテーマを使う

デフォルトはブラウザの設定に合わせて、light または darkになる
下記の設定でそれを変えることが可能

  daisyui: {
    themes: [
      "light", // デフォルトのテーマ
      "dark", // darkモードのテーマ
      "cmyk", // 指定できるテーマ1
      "black", // 指定できるテーマ2
    ],
  }
ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

ライトモードの場合

<div class="container p-8">
  <a class="btn btn-primary">Default</a>
  <a class="btn btn-primary" data-theme="dark">Dark</a>
  <a class="btn btn-primary" data-theme="cmyk">CMYK</a>
  <a class="btn btn-primary" data-theme="black">Black</a>
</div>

↓

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

ダークモードの場合

<div class="container p-8">
  <a class="btn btn-primary">Default</a>
  <a class="btn btn-primary" data-theme="dark">Dark</a>
  <a class="btn btn-primary" data-theme="cmyk">CMYK</a>
  <a class="btn btn-primary" data-theme="black">Black</a>
</div>

↓

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

オリジナルテーマを作る

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて
themes: [
  {
    mytheme: {
      ...require("daisyui/src/colors/themes")["[data-theme=light]"],
      "primary": "#f43f5e",
      "secondary": "#ec4899",
      "accent": "#facc15",
      "neutral": "#3D4451",
      "base-100": "#FFFFFF",
      "info": "#0369a1",
      "success": "#4d7c0f",
      "warning": "#a16207",
      "error": "#9f1239",
    },
  }, // デフォルトをカスタムテーマに
  "dark", // darkモードのテーマ
],
ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

テーマジェネレーター

公式から提供されています、視覚的に結果を確認しながらテーマを作成できるので、かなり便利です。

https://daisyui.com/theme-generator/

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて
ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

5. オススメのコンポーネント

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

モーダルウィンドウ

CSSのみでボタンを押すとモーダルが開きます。

<label for="my-modal" class="btn modal-button">open modal</label><!-- ボタン -->
<input type="checkbox" id="my-modal" class="modal-toggle">
<div class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Congratulations
       random Interner user!</h3>
    <p class="py-4">You've been selected for a chance to
       get one year of subscription to use Wikipedia for free!</p>
    <div class="modal-action"><label for="my-modal" class="btn">Yay!</label></div>
  </div>
</div><!-- 引用元：https://daisyui.com/components/modal/# -->
ラクスR&D Meetup - CSSフレームワーク
daisyUIについて
ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

6. さいごに！

今回、このLTでTailwind CSS＋daisyUIの魅力を上手く伝えられていれば、幸いです。

また、下記のサイトでdaisyUIをオンライン実行することもできます、もし気になった方は、お試しください！
https://daisyui.com/tailwindplay

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

同人誌について

今回、発表した「Tailwind CSS」や「daisyUI」の内容も含む同人誌をBooth、技術書典で頒布中です！

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

商業版について

商業版がインプレスR&D様から技術の泉シリーズとして刊行されました。
製本はカラーです。
ぜひ、購入後にレビューをお願いします🙏

Amazon

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

ご清聴、ありがとうございました！

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

他OSSプロジェクトでの導入事例（参考）

ラクスR&D Meetup - CSSフレームワーク
daisyUIについて

ソースコードの引用／流用元

https://daisyui.com/
https://daisyui.com/components/modal/#

ラクスR&D Meetup - CSSフレームワーク

Tailwind CSSはPost CSSのプラグインのため、PostCSSの他のPluginと組み合わせて動かすこともできます。 daisyUIはそのTailwind CSSのプラグインとして動かす。 意図してないですが、今回のMeetupのテーマに合うものになったので、ぜひ、見ていただけたらと思います。

今日も子供の声がはいることがあるかもしれません。ご了承ください。