Communitygithub.com

papopporking-oss/opencode-nextjs-standard

daisyUI 5 的安裝指南

opencode-nextjs-standard 是什麼?

此技能為開發者提供在 Next.js 專案中安裝 daisyUI 5 的完整指引。它明確指出 daisyUI 5 需要搭配 Tailwind CSS 4 使用,且 `tailwind.config.js` 在 Tailwind CSS v4 中已被棄用。安裝步驟包括透過 npm 安裝套件,並在 CSS 檔案中匯入 Tailwind CSS 和 daisyUI 的外掛。技能同時涵蓋了 CDN 和獨立執行檔的安裝方式,並列出多種框架和工具的專屬安裝指南連結,例如 11ty、Angular、Astro、Next.js 等,方便開發者根據自身專案環境選擇合適的安裝方法。

相容平台~Claude Code~Codex CLI~Cursor✓OpenCode
npx skills add https://github.com/papopporking-oss/opencode-nextjs-standard/tree/HEAD/.agents/skills/daisyui/install

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

安裝 daisyUI 5

安裝指南

  1. 你必須搭配 daisyUI 5 使用 Tailwind CSS 4。
  2. tailwind.config.js 在 Tailwind CSS v4 中已棄用。請勿使用 tailwind.config.js。如果 Tailwind CSS v4 是 Node.js 依賴項目,只需在 CSS 檔案中加入 @import "tailwindcss";。
  3. 若要安裝 daisyUI 5,請執行 npm i -D daisyui@latest。然後在 CSS 檔案中加入 @plugin "daisyui";。
  4. 盡可能將 daisyUI 安裝為依賴項目。如果您有特殊原因需要使用 CDN,請改用 Tailwind CSS 和 daisyUI 的 CDN 檔案:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  1. 如果 Tailwind CSS 和 daisyUI 是 Node.js 依賴項目,請使用此 CSS 檔案:
@import "tailwindcss";
@plugin "daisyui";

CDN

對於無需安裝的瀏覽器設定,請載入預先編譯的 daisyUI CSS 和 Tailwind 瀏覽器建置版本:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

主要的 CDN 檔案包含淺色和深色主題。若要載入所有內建主題,請使用:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />

您也可以從 CDN 合併單獨的 daisyUI CSS 模組。CDN 檔案不包含 is-drawer-open: 和 is-drawer-close: 變體。

獨立執行檔與框架特定設定

請使用所選指南中的檔案路徑和整合步驟。每個框架可能使用不同的 CSS 進入點。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

相關技能