DaisyUI: Tailwind CSS コンポーネント

概要

daisyUI は、 Tailwind CSS の開発をより速く、簡潔に、効率的にするプラグイン。セマンティックな コンポーネントクラス名 を提供し、コード量削減と保守性向上を実現。主要企業のエンジニアにも採用されている実績。 カスタマイズ性 が高く、独自テーマ作成も可能。主要なJSフレームワークすべてに対応、インストールも簡単。

daisyUIでTailwind CSS開発を加速

daisyUI は Tailwind CSS 用のプラグイン
有用なコンポーネントクラス名 を提供し、開発効率向上
btn や card、 toggle など直感的なクラス名で、何度も同じスタイルを書く手間を削減
セマンティックなクラス名 で、記述が明確かつ保守性の高いコードを実現
Meta Research、 Alibaba、 Amazon、 Adobe、 Google Cloud など大手企業でも採用実績

Tailwind CSSの課題とdaisyUIの解決策

通常のTailwind CSSプロジェクトでは、 各要素ごとに大量のユーティリティクラス名 を記述する必要
同じようなスタイルを 毎回手動で記述 する作業の非効率さ
daisyUIは 共通UIコンポーネント 向けのクラス名を追加し、 重複作業の削減 を実現

カスタマイズとテーマ機能

daisyUIは Tailwind CSSのユーティリティクラス を基盤に構築
カスタマイズ性 が高く、ユーティリティクラスを使って細かく調整可能
独自の テーマジェネレーター で、サイト独自のカラーやスタイルを簡単に適用
61種類のコンポーネントと500以上のユーティリティクラスを提供

フレームワーク非依存・導入の容易さ

純粋なCSSベース で、 JavaScriptバンドル不要
React や Vue、 Svelte など、主要なJSフレームワークすべてに対応
Nodeパッケージ として簡単にインストール可能
- NPM: npm i -D daisyui@latest
- PNPM: pnpm add -D daisyui@latest
- Yarn: yarn add -D daisyui@latest
- Bun: bun add -D daisyui@latest
- Deno: deno i -D npm:daisyui@latest
app.css に以下を追加するだけのシンプルな導入手順
- @import "tailwindcss";
- @plugin "daisyui";

daisyUIの特徴まとめ

高速開発 と クリーンなコード の両立
保守性・再利用性 の高いプロジェクト構築
自由なデザインカスタマイズ と テーマ作成
幅広い導入事例 と コミュニティサポート
Fireship.io、 Syntax Podcast、 FreeCodeCamp などで紹介実績

Hackerたちの意見

Tailwindって、Bootstrapと同じ問題があるよね。すぐにTailwind使ってるってわかっちゃうし、なんかそれが気持ち悪い。

└

前置き: うっかりTailwindとDaisyUIを混同しちゃった。上のコメントはTailwindについて話してるけど、私の「前のコメント」はDaisyUIについて言ってて、うっかりTailwindって言葉も使っちゃった。DaisyUIの以前のバージョンでは、見た目が子供っぽいのが気に入らなかったけど、V5で改善された。親コメントを同じ問題について話してると勘違いしちゃった。私のミス。前のコメント: 最後にTailwindを使ったのはいつか分からないけど、V5はV4に比べてかなり改善されてるよ。V4は確かにちょっと子供っぽかったし、V5でほとんど/全部が修正された。

└

どうやってわかるの？それともTailwind UIのことを言ってるの？

└

どれだけ努力するかによるよね。Tailwind Plus（以前のTailwind UI）が提供している基本的なテンプレートやコンポーネントを使うだけで済むかどうか。彼らのショーケースセクションを見てみると、ほとんどのものがTailwindCSSを使っているとは思えないよ（個人的にね）。

└

美的感覚には飽きるかもしれないけど、ウェブサイト間でUIコンポーネントに慣れていることで使いやすさが向上するんじゃない？

└

TailwindはCSSを書く別の方法に過ぎないよ。UIライブラリやウェブサイトは、使いやすさや可読性のために共通のアイデアに収束していくから、もしかしたらTailwindのUIライブラリとTailwind自体を混同してるかも。Tailwindは、flexboxやCSSグリッドがそうであるように、ウェブサイトを特定の見た目に強制するわけじゃないしね。確かに、Tailwindを使ってるとアニメーションなどのCSSの全機能を深く使うことは少ないかもしれないけど、ほとんどのウェブサイトはTailwindを使ってても使ってなくても、そこまでやってないよね。

└

Bootstrapは、その組み込みの見た目から離れると抵抗してくるけど、Tailwindはかなり中立に近いよ。Tailwindのコンポーネントを直接コピー＆ペーストして、組み込みのパレットやフォントを使えば、Tailwindの見た目が得られるんだ。でも、カスタマイズしたパレットを使うのは簡単だし、違うフォントを使うのもそんなに難しくないよ（まあ、厄介な部分はHTMLやブラウザ、ウェブのせいだから、Tailwindのせいじゃないけどね）。HTMLを知ってれば、Tailwindのコンポーネントをスキップするのも多分簡単だよ（簡単なスキルではないけど、習得する価値はあると思う）。

└

それは、ウェブサイトが別のCSSファイルを使っているか、style="..."属性を使っているかをすぐに見分けられるって言ってるようなもんだね。意味不明。

└

Blendfulのコンポーネントはどう？[0] Tailwindでテーマ付けされたものは全部同じに見えるってのは同意だけど、人気のあるスターターテンプレートが基本的に同じ見た目と感じを持ってるからだと思う。これがこのサイトが逃れようとしていることなんだ。Tailwindにはあらかじめ定義されたカラースキームもあって、スタイルの固定化を助長してるよね。もちろん、Tailwindを使っても群れから抜け出すことは可能だけど、一般的には、そこそこ見栄えが良くて、そこそこ簡単に作れるものを作るのは簡単だと思う。それが人々がTailwindを好きな理由だよ。[0]: https://www.blendful.com

これはTailwindの対極をTailwindで再構築したものだね。Bootstrapは何十年もこれをやってたし（Daisyも場合によっては同じセマンティッククラス名をコピーしてる）。Tailwindはこれから脱却するはずだったのに、また元に戻ってきちゃったね。Bootstrap使えばいいじゃん？

└

もしかしたらTailwindはデッドコードの削除が得意なのかも。

└

DaisyUIの上にTailwindを使えるから、例えば btn rounded-lg みたいに。

└

Tailwindはすでに一周回ってる。基本的には、CSSを使って、スタイリング情報をマークアップの属性内に入れるという、CSS以前のアプローチを模倣するためのツールキットなんだ（HTML2時代のbgcolorやcellpaddingを思い出してみて）。

Tailwind愛好者の進化がほぼ完了したね。もうすぐ、Tailwindが好きじゃなかった昔の人たちと再会するよ。

└

彼らはそれに決める前に、もう一回確認すると思うよ。

私はTailwindをあまり使わないんだ。自分の(S)CSSが好きだから。https://daisyui.com/components/button/を見たけど、すぐにBootstrapに似たクラスが目に入った。だから、質問なんだけど、なんでTailwindの上にコンポーネントを作るの？普通のCSSじゃダメなの？それとも、コンポーネントと混ぜてカスタマイズできるのかな？それならいいけど、そうじゃなかったら、また元に戻っちゃう感じがする。

└

「フェンスを取り除く前に、なぜそれが設置されたのかを知っておけ。」

└

Tailwindではミックスインを使えるよ。これが一貫性をもたらすんだ（俺は結構好き）。「gap-1」って言うだけで、自分が書いたカスタムコンポーネントやコンポーネントライブラリで一貫性があるってわかるのがいいね。

└

そうだよ、Tailwindクラス（例えば btn p-8）で全て上書きできるから。Tailwindが好きだけど、Bootstrapのような包括的な体験を求めてるなら、いい選択だね。

└

CSSは出た当初から手動で書いてるよ。最近の追加機能は、&やネスティング、変数などで少し楽になったけど、全体的にCSSはスケールさせるのが本当に難しい。そろそろTailwindを学んだ方がいいかも、自分でCSSを作り続けるよりもね。だから、DaisyUIをブックマークしたよ。サイトが素晴らしくて、すごく役立ちそうなんだ。

このプロジェクトが存在する理由を見落としているコメントが多いのに驚いてる。多くのTailwindプロジェクトでは、ボタンの見た目やフィールドの見た目を標準化したくなるから、同じ20以上のTailwindクラスをコピー＆ペーストするのではなくて。button { @apply flex items-center blahblahblah; }をapp.cssに適用するだけでしょ？もちろんできるよ。DaisyUIのbtnを使うこともできるし。DaisyUIは、必ず作りたい一般的なUIコンポーネントのショートカットだと思うし、大きく成長するアプリでは必然的に標準化されるものだよ。Bootstrapとはどう違うの？それは、DaisyUIが実装していない他の全てのことにTailwindを使い続けられることだよ。Tailwindに追加するレイヤーみたいなものだから。プロジェクトの本質は、一般的なUIコンポーネントのショートカットだね。ユーザーとしての批評は、DaisyUIのコンポーネントの多くが良いコントラストに欠けているように見えるから、使えないものもあるってこと。テーマの状況は本当に面白くて使うのが楽しいけど、例のページを見ると、読みづらい感じがする。自分にとって良いと思えるライトとダークのデフォルトテーマが見つからない（コントラストと明るさについて）。色のフックがないだけかもしれないけど、深く掘り下げてないからわからない。自分にとっては、DaisyUIのソースコードの一部を簡単にコピー＆ペーストして、自分のデザインシステムに合わせて修正できるのが大きな価値だと思ってる。

└

多くのTailwindプロジェクトでは、ボタンの見た目やフィールドの見た目を標準化したくなるもので、同じ20以上のTailwindクラスをコピー＆ペーストして、見栄えの良いボタンを作るよりもね。CSSクラスはすでにこれをネイティブにサポートしてるんだ。CSSの本来の目的は、関連するスタイルをクラスにまとめて、そのクラスを必要なところで参照できるようにすることだったのに、Tailwindが出てきて、CSSクラスを使って、スタイルを細かく指定する以前のCSSの動作を模倣してるんだよね。そして今、DaisyUIが登場して、クラスベースのスタイリングを、クラスベースのCSSシステムの上に属性ベースのスタイリングを模倣するツールキットの上に乗せてる。しばらくすると、この技術スタックの歪みは、問題に最適なツールを選ぶのではなく、慣れ親しんだツールを選んだ結果だと認めざるを得なくなるよね。

└

多くのTailwindプロジェクトでは、ボタンの見た目やフィールドの見た目を標準化したくなるもので、同じ20以上のTailwindクラスをコピー＆ペーストして、見栄えの良いボタンを作るよりもね。これってCSSではクラスやIDって呼ばれてるんじゃない？Tailwindは単にCSSの上にCSSがあるだけなの？

└

button { @apply flex items-center blahblahblah; }をapp.cssに適用するだけでいいの？もちろんできるよ。数年前にTailwindを使おうとしたけど、その時は明確に推奨されてなかったと思う。

└

DaisyUIが実装していない他のすべてのことにTailwindを使い続けられるよ。Tailwindに追加されるレイヤーみたいなもんだ。私は同じプロジェクトでTailwindとVuetifyJsを使ったから、違いとか利点は見えないな。

└

でも、Tailwindはサイトの個性的な見た目を素早くプロトタイプして標準化するために存在してるし、これらのスタイルをコンポーネントで再利用することもできるんだ。標準化や再利用の部分は絶対に重要だよね。

└

多くのTailwindプロジェクトでは、ボタンの見た目やフィールドの見た目を標準化したくなるよね。20以上のTailwindクラスをコピー＆ペーストして、見た目の良いボタンを作るよりも。ほとんどのプロジェクトでは、Tailwindの外で何らかのコンポーネントシステムを使ってると思う。例えば、ReactコンポーネントにはTailwind CSSのクラスが含まれてるかもしれないし、そのコンポーネントは何度も使われるんだ。

└

コンポーネントの役割はそこにあるよね。クラスの問題の一つは、追加のDOMノードやJSが必要になる動作に直面することだよ。例えば、ほとんどのボタンがローディング状態を表示する必要があったらどうする？Bootstrapは思ってたほど悪くないけど、複雑で特定の要素の組み合わせを要求するAPIの例はまだまだ見かけるよ。彼らのアコーディオンとShadCNのを比べてみて。シンプルなボタンならクラスだけで済むかもしれないけど（リスクを考えるとあまりおすすめしないけど）、ドロップダウン以上の複雑なものはコンポーネントにすべきだよ。例えば、daisyUIのドロップダウンは矢印キーのナビゲーションやエスケープをサポートしてないからね。

└

歴史的に、Tailwindでコンポーネントの見た目を標準化する方法は、使っているツールでコンポーネントの抽象化を利用することだよ。ボタンをどこか一度定義して、必要なクラスを追加するだけ。もしTailwindのクラスを長い文字列でコピー＆ペーストしてたら、Daisyを聞く前からもう間違ってたってことだね。

└

同じ20以上のTailwindクラスをコピー＆ペーストするなんて、正気の開発者はやらないよ。Tailwindチームやドキュメントがこれを推奨してるのはどこ？

└

多くのTailwindプロジェクトでは、ボタンの見た目やフィールドの見た目を標準化したくなるのは避けられない。これには、どんなバックエンドやフロントエンドフレームワークでもコンポーネントを使うべきだよ。「このボタンには特定のデータやテキストが必要だけど、他のボタンには必要ない」って言うなら、素晴らしい、コンポーネントからそれを抽出すればいい。12個の異なるボタンを作る理由はないよ。

実際、コンポーネントベースのHTMLを使わない限り、Tailwindはめちゃくちゃだし、Daisyはおそらく役に立つよ。Daisy UIはBootstrapの精神的な後継者みたいで、Bootstrapも同じことをCSSを基盤にしてやってたから、面白い全一周の瞬間だね。HTMLをコンポーネントに分割するシステムの中では、Tailwindクラスは問題じゃない…結局、こうなるだけなんだ。

うちの小さな会社は20年経っても、HTML、CSS、JavaScriptだけで全てやってるよ。月に数回はみんなが訪れるサイトも2つあるし、賭けてもいい。

└

どこの会社の話？

└

Hacker Newsに載ったの？いいね！

HTMXを使う方法に興味がある人は、読み進めてね。DaisyJSはHTMXをサポートしてるから、VueやReactのような派手なJSフレームワークなしでも普通のHTMLで動くんだ。まずはHTMLを提供できるものをセットアップして、テンプレートエンジンを使うよ。私のお気に入りはDjango。ローカルのNodeJSディレクトリにdaisyuiやtailwindcssなども必要だね。その辺はそんなに難しくないから、飛ばすね。次に、HTMXの部分を追加したしっかりしたbase.htmlを作ることを確認して。HTMXはDjangoのビューからコンテンツを取得するよ。もし普通のTailwindを使ってたら、基本的に再利用可能なコンポーネントを作るためにdjango_componentsみたいなものを使う必要があったかもしれないけど、DaisyJSを使えばTailwindが大幅に簡素化されるから、ただ使うだけで素晴らしいコンポーネントが手に入るんだ。テンプレートの継承やインクルードも使って、Djangoの基本的な概念を活用してね。全体的に、これはごちゃごちゃしたJSフレームワークや、ほとんど必要ないSPAなしで未来に対応したアプリを作るための本当にクリーンな解決策だよ。とにかく、このアプローチの大ファンなんだ。Tailwind自体に問題がある人もいるけど、今はその抽象化のレイヤーをスキップしてるって考えた方がいいよ。

└

完全に同意！Go言語とエコーフレームワークで使ってるけど、すごく軽いよ。CSSとJSをビルドするためのシンプルなvite設定があって、エアで全てをリロードしてるから、速くて簡単。編集：証明はできないけど、このアプローチだとAIコーディングももっと効率的だと思う。サーバーサイドレンダリングが明確で、最新の機能を持ったプレーンなJSをviteとCSSクラスで作ってるからね。

└

このアプローチをさらに探求しているリポジトリや記事はある？

「毎回、毎ページ、毎プロジェクトで100個のクラス名を書く代わりに、セマンティックなクラス名を使おう！😎 説明的で、速くて、クリーンで、メンテナンスも楽だよ。」セマンティックなクラス名！？すごいね。ウェブが自分を再発明してるように感じるのは俺だけ？

https://smacss.com が流行らなかったのは残念だけど、代わりにTailwindが勝ったね。DaisyUIはほぼそこまで来てるけど、このアーキテクチャのガイドラインに従っているプロジェクトはほんの数少ないんだ。

ハクソク