Config

How to change the default configuration of daisyUI?

daisyUI can be configured from your tailwind.config.js file. Default config:

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
  },

  //...
}

Config values explained:

• #styled

  Boolean (default: true)

  If it's true, components will have colors and style so you won't need to design anything. If it's false, components will have no color and no visual style so you can design your own style on a basic skeleton.

• #themes

  Boolean or array (default: false)

  If it's true, all themes will be included. If it's false, only light and dark themes will be available. If it's an array, only themes in the array will be included and the first theme will be the default theme. Read more about themes.

• #base

  Boolean (default: true)

  If it's true, a few base styles will be added.

• #utils

  Boolean (default: true)

  If it's true, responsive and utility classes will be added.

• #logs

  Boolean (default: true)

  If it's true, daisyUI shows logs in the terminal while CSS is building.

• #darkTheme

  String (default: "dark")

  Allows us to pick another theme for system's auto dark mode. By default, dark theme (or a custom theme named dark) will be the default theme if no theme is specified and the user is using dark mode on their system. With this config, you can set another theme to be the default dark mode theme.

• #prefix

  String (default: "")

  Adds a prefix to class name for all daisyUI classes (including component classes, modifier classes and responsive classes). For example: btn will become prefix-btn. If you're using a second CSS library that has similar class names, you can use this config to avoid conflicts. Utility classes like color names (e.g. bg-primary) or border-radius (e.g. rounded-box) will not be affected by this config because they're being added as extensions to Tailwind CSS classes. If you use daisyUI prefix option (like daisy-) and Tailwind CSS prefix option (like tw-) together, classnames will be prefixed like this: tw-daisy-btn.

• #themeRoot

  String (default: ":root")

  Which element to attach the theme CSS variables to. In certain situations (such as embedding daisyUI in a shadow root) it may be useful to set this to e.g. *, so all components will have access to the required CSS variables.