全局配置

如何更改 daisyUI 的默认配置？

可以通过 tailwind.config.js 来配置 daisyUI 的配置。 默认配置:

module.exports = {
  //...

  // add daisyUI plugin
  plugins: [require("daisyui")],

  // daisyUI config (optional - here are the default values)
  daisyui: {
    themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
    darkTheme: "dark", // name of one of the included themes for dark mode
    base: true, // applies background color and foreground color for root element by default
    styled: true, // include daisyUI colors and design decisions for all components
    utils: true, // adds responsive and modifier utility classes
    prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
    themeRoot: ":root", // The element that receives theme color CSS variables
  },

  //...
}

配置值说明:

• #styled

  Boolean (default: true)

  如果设置为 true，组件会有默认的颜色和样式，所以你不需要去进行设计。 如果设为 false，组件是没有颜色和视觉样式的，所以你可以在一个基本的骨架上设计你自己的颜色和视觉样式。

• #themes

  Boolean or array (default: false)

  如果设为 true，则会包含所有的主题。 如果设为 false，则只有白天和黑暗模式的主题。 如果是一个数组，则只有数组包含的主题会被加载，数组的第一个主题会成为默认主题。 在阅读更多关于主题的内容

• #base

  Boolean (default: true)

  如果设为 true，一些基础样式 会被添加。

• #utils

  Boolean (default: true)

  如果设为 true，响应式和工具类会被添加

• #logs

  Boolean (default: true)

  如果设为 true，daisyUI 会在 CSS 构建时在命令行窗口输出日志。

• #darkTheme

  String (default: "dark")

  选择另一个主题作为系统自动黑暗模式的主题。dark 是默认黑暗模式主题（或者自定义的主题名字是 dark）。通过这个配置，你可以给默认黑暗模式主题设定另一个主题。

• #prefix

  String (default: "")

  给 daisyUI 的类名称增加一个前缀（包含所有的组件类，修饰类和响应类）。 例如：btn 会变为 prefix-btn。 如果你还使用其他的 CSS 库，并且有冲突，可以用这个方法来避免冲突问题。 颜色名字（例如： bg-primary）或者 border-radius（例如： rounded-box）不会受到这个参数的影响，因为这些参数是作为 Tailwind CSS 类的扩展来设计的。 daisyUI 的prefix 的功能（例如daisy-）与 TailwindCSS 的 prefix 的功能（例如 tw-）一起使用时，最后的类名是 tw-daisy-btn。

• #themeRoot

  String (default: ":root")

  将主题 CSS 变量附加到哪个元素。 在某些情况下（例如在 shadow root 中嵌入 daisyUI），将其设置为 * 可能很有用，因此所有组件都可以访问所需的 CSS 变量。