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, // true: all themes | false: only light + dark | 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
    rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
    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
  },

  //...
}

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.

• #rtl

  Boolean (default: false)

  If it's true, your theme will be right-to-left. You need to add dir='rtl' to your body tag. If you're using daisyUI with RTL option, I suggest using tailwindcss-flip plugin to flip all your Tailwind utilities automatically.

• #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.