Communitygithub.com

papopporking-oss/opencode-nextjs-standard

daisyUI 5 的配置选项

opencode-nextjs-standard 是什么?

此技能提供 daisyUI 5 的完整配置文档和示例。它详细说明了如何通过 `@plugin "daisyui"` 语句在 CSS 中自定义主题、根选择器、包含/排除组件、CSS 前缀以及日志记录。用户可以选择仅启用 `light` 主题,或启用所有内置主题并设置默认主题和暗色模式偏好。该技能适用于任何使用 Tailwind CSS v4 和 daisyUI 5 的项目,例如 Next.js、Vite 或 Astro 应用。通过复制这些配置代码块,开发者可以快速集成并定制 daisyUI 的外观,包括控制滚动条装订线、复选框等组件,以及使用前缀避免样式冲突。

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

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

配置

daisyUI 5 配置文档:https://daisyui.com/docs/config/

不进行配置的 daisyUI:

@plugin "daisyui";

仅使用 light 主题的 daisyUI 配置:

@plugin "daisyui" {
  themes: light --default;
}

使用所有默认设置的 daisyUI:

@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
  root: ":root";
  include: ;
  exclude: ;
  prefix: ;
  logs: true;
}

示例配置: 此配置启用所有内置主题。bumblebee 主题是默认主题。synthwave 主题是 prefersdark 主题,作为默认暗色模式。 要使用其他已启用的主题,请在 <html> 元素上添加 data-theme="THEME_NAME"。 该配置排除了根滚动条装订线。它使用 daisy- 前缀作为所有 daisyUI 类的前缀,并禁用了控制台日志。

@plugin "daisyui" {
  themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk;
  root: ":root";
  include: ;
  exclude: rootscrollgutter, checkbox;
  prefix: daisy-;
  logs: false;
}

Individual skills in this repo

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

相关技能