クリーンなHTMLを保てるシンプルなclassのTailwind.css用UIコンポーネント集・「daisyUI」

Ads

daisyUI


daisyUIはクリーンなHTMLを保てるシンプルなclassのTailwind.css用UIコンポーネント集です。

この手のUIフレームワークの一部ではユーティリティクラスを組み合わせる事が多く、細かい設定が可能な代償としてHTMLの可視性が損なわれがちですがdaisyUIはコンポーネントクラスを追加するだけで済む、との事ですが、デフォルトとしてある程度作ってあるというだけでこれはdaisyUIに限った話ではないのでさほどメリットとは言えない気がしました。

とはいえ特に悪い印象も無く、普通に使いやすい気がしました。細かい設定が出来るユーティリティクラスはHTMLが汚くなるけど、あれはあれで必要なケースもあります。

少し脱線しましたが、以下daisyUIのサンプルです。

Ads


See the Pen DaisyUI sample (Tailwind CSS component library) by kachibito
(@kachibito) on CodePen.

動作サンプルです。タブは切り替わりません。

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@1.0.0/dist/full.css" rel="stylesheet" type="text/css" />
<div class="m-4 tabs">
  <button class="tab tab-lg tab-lifted">Tab 1</button>
  <button class="tab tab-lg tab-lifted tab-active">Tab 2</button>
  <button class="tab tab-lg tab-lifted">Tab 3</button>
</div>

例えばタブなどもシンプルなclassで実装できるのは魅力ですね。また、テーマもいろいろ選べるようになっていて、全部で21種のテーマが用意されています。

<html data-theme="cupcake">

テーマの変更はhtmlタグにdata-themeというカスタムデータ属性を追加して設定するだけでとても簡単に切り替え可能です。

勿論コンポーネントも大量に用意されているのでTailwind.cssを使うっプロジェクトの際のお供に検討してみるのも良さそうですね。ライセンスはMITとの事です。

daisyUI

ホーム
トップ