daisyUIがTailwind CSSの長〜いクラス名を整理されたコンポーネントに変換
Tailwind CSSでインターフェースを作ったことがある人なら、この的痛苦を経験しているはずです。マークアップファイルを開くと、一般的なボタンだけで4行ものコードになります。パディング、ボーダー半径、背景、ホバー状態、フォーカス状態、アクティブ押下状態など десятки классов。
一方では、このユーティリティアプローチによりスタイルを完全にコントロールできます。他方では、数ヶ月後にそのようなマークアップを読むのは的痛苦です。
daisyUIライブラリはこの問題を正確に解決します。設定の柔軟性を保ちながら、btn、card、modalのようなおなじみのセマンティッククラスをTailwindに戻します。
内部構造
このプロジェクトは開発者のPouya Saadeghiによって作成され、メンテナンスされています。リポジトリはすでにGitHubで42,000を超えるスターを獲得しています。現在、このライブラリは5番目のメジャーバージョンに向けて積極的に更新されています。
本質的に、daisyUIはTailwind CSS用のプラグインとして動作します。主な特徴は、JavaScriptが裏側にないことです。純粋なCSSです。これにより、コンポーネントはどこでも簡単に統合できます：React、Vue、Svelte、Angular、またはDjango、Laravel、Goなどの一般的なサーバーサイドテンプレートで。
ドロップダウンやモーダルウィンドウが必要な場合、それらはネイティブHTML要素 <dialog> と <details> またはCSSセレクタ経由で動作します。プロジェクトで既に используемом стеке で状態管理のロジックはご自分で書きます。
daisyUIが他のUIライブラリとの違い
通常のボタンのマークアップを比較してみましょう。純粋なTailwindでは、青い基本的なボタンには長いチェーンを書く必要があります：
<button class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Сохранить
</button>
daisyUIでは、同じ結果ははるかに簡潔に達成できます：
<button class="btn btn-primary">
Сохранить
</button>
同時に、おなじみのTailwindユーティリティで任意のパラメータを選択的にオーバーライドすることを妨げるものは何もありません。ボタンを少し広くしたりシャドウをリセットしたい場合は、属性に w-full または shadow-none を直接追加するだけです class。
主な機能
ライブラリには最初からいくつかの素晴らしい機能が付属しています。
すぐに使えるセマンティックコンポーネント。カタログにはテーブル、バッチページネーション、アコーディオン breadcrumbs、入力フォームなど約50の準備された要素が含まれています。マークアップはクリーンなまま、レイアウトがスピードアップします。
組み込みのテーマシステム。プロジェクトには30以上の組み込みデザインテーマがあり、ダーク、ライト、レトロ、サイバーパンクなどが含まれます。テーマの切り替えは1つのHTML属性を設定するのと同じくらい簡単です：
<html data-theme="dark">
設定ファイル内のCSS変数で独自のカラーパレットを設定でき、各要素のスタイルを書き直す必要はありません。
バンドルサイズの節約。これはTailwindプラグインであるため、バンドラーは未使用のセレクターをすべて削除します。テンプレート実際に存在するCSSだけが本番環境に到達します。
ライブラリが最も効果的な場面
daisyUIはいくつかのシナリオで役立ちます：
- ラピッドプロトタイピングとMVP。各入力の調整に何時間も費やすことなく、数晚で動作する管理パネルや個人アカウントインターフェースを組み立てる必要がある場合。
- サーバーサイドレンダリングプロジェクトとHTMX。JSランタイムが不要であるため、コンポーネントはGo、Python、Rubyでのモノリシックアプリケーションに完璧にフィットします。
- 個人プロジェクト。デザイナーを雇わずに整ったデザインを得るための優れた方法。
玉にきず
スタジオからの複雑なユニークなデザインモックアップを持つプロジェクトで作業している場合、daisyUIのデフォルトスタイルが邪魔になることがあります。コンポーネントの基本的なボーダー半径や内部パディングを常にオーバーライドすることになります。そんな状況では、純粋なTailwindで書いたり、Radix UIやHeadless UIなどのヘッドレスライブラリを使用したりする方が簡単です。
daisyUIはインターフェース構築速度とマークアップのクリーンさの間の良いバランスを取っています。Tailwindのコンセプトが好きだが、コード内のユーティリティクラスの終わりないストリームに不満を感じているなら、プロジェクトは次の個人プロジェクトや管理パネルでテストする価値があります。
インストールは npm i -D daisyui@latest で数分かかり、その後シンプルにスタイル設定にプラグインを追加するだけです。
関連プロジェクト