Tailwind CSS + DaisyUI でデザインシステムを構築する

Tailwind CSS + DaisyUI でデザインシステムを構築する

TailwindDaisyUICSSWeb開発

DaisyUI は Tailwind CSS のプラグインとして動作するコンポーネントライブラリです。

DaisyUI の特徴

  • セマンティックなクラス名 (btn, card, badge など)
  • テーマ機能で簡単にカラーパレットを変更可能
  • アクセシビリティを考慮したコンポーネント

テーマの設定

tailwind.config.mjs で DaisyUI のテーマを設定できます。

export default {
  plugins: [require('daisyui')],
  daisyui: {
    themes: ['light', 'dark'],
  },
};

Badge の使い方

タグ表示には badge クラスを使うと簡単にスタイリングできます。

<span class="badge badge-primary">Tailwind</span>