How to change the default configuration of daisyUI?
daisyUI can be configured from yourtailwind.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
},
//...
}
Boolean (default: true)
Boolean or array (default: false)
Boolean (default: true)
Boolean (default: true)
Boolean (default: true)
Boolean (default: false)
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.String (default: "dark")
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.String (default: "")
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
.