OSS探訪
GitHubで見るプロジェクトサイト

daisyUI — Tailwind CSSへcomponent classとthemeを追加する

OSS規模スコア 291.8OSS健全度 87更新ペース 62 Commit/30日
スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標（上限なし）です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
42,440
主要言語
JavaScript
ライセンス
MIT
リポジトリ最終更新
2026/09/18

概要

daisyUIは、Tailwind CSSのutilityを土台にbutton、card、modal等のcomponent classとthemeを提供するCSS libraryです。ReactやVue固有のruntimeを追加せず、HTML classとしてUI patternを利用できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：

semanticなcomponent classをTailwind CSSへ追加する

btn、cardなど用途を表すclassを使い、utility classを大量に並べずに共通component styleを適用できます。

出典：[2][3]

複数themeをCSS変数中心で切り替える

標準themeや独自themeを設定し、component markupを大きく変えずに色や見た目を切り替えられます。

出典：[2][3]

Tailwind CSSを使いながらcomponent単位の共通UIを早く揃えたい場合に

frameworkに依存せず、Tailwind utilityとcomponent classを併用してUIを短時間で構築したいprojectに向きます。

出典：[2]

Tailwind CSS versionとplugin設定を合わせる

daisyUI 5の公式Vite手順はTailwind CSS 4系を前提にしています。旧Tailwind/daisyUIの設定例を混在させず、利用versionに合うinstallation guideを確認してください。

出典：[3]

参考にした公式資料

  1. [1]saadeghi/daisyui repository(2026-09-21)
  2. [2]daisyUI README(2026-09-21)
  3. [3]daisyUI Vite installation(2026-09-21)
  4. [4]daisyUI package(2026-09-21)
  5. [5]daisyUI MIT license(2026-09-21)
編集部からの補足

daisyUIはReact/Vue専用componentではなく、Tailwind CSSのpluginとして`btn`や`card`等のsemantic classとthemeを追加します。現在のreleaseは5.7.42です。公式Vite手順ではTailwind CSS 4系のVite pluginと`@plugin "daisyui"`を使います。

3ステップで試す

  1. 1

    Tailwind CSS 4とdaisyUIを追加

    daisyUI 5の公式Vite手順に合わせて必要packageを追加します。

    npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest
  2. 2

    ViteとCSSへpluginを設定

    Tailwind Vite pluginを有効化し、CSS側でdaisyUI pluginを読み込みます。

    vite: tailwindcss() / CSS: @import "tailwindcss"; @plugin "daisyui";
  3. 3

    component classを試す

    btn等のsemantic classを使い、themeとcomponent styleが適用されることを確認します。

    <button className="btn btn-primary">Button</button>
公式READMEで確認

成長

成長の推移 · 直近30日

42,440 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）
62
Open PR
34

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
GitHubで見る

GitHub Topics

  • tailwind-css
  • ui-library
  • design-system
  • ui-pattern
  • ui-framework
  • css-components
  • css-framework
  • ui-kit
  • ui-design
  • design-systems
  • tailwind
  • css
Stars
42,440
Forks
1,691
Watchers
168
Open Issues
18
Contributors
306
主要言語
JavaScript
ライセンス
MIT
リポジトリ最終更新
2026/09/18
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。