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)
daisyui: {
styled: true,
themes: true,
base: true,
utils: true,
logs: true,
rtl: false,
prefix: "",
darkTheme: "dark",
},
}
Boolean (default: true)
Boolean or array (default: true)
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
.You've been selected for a chance to get one year of subscription to use Wikipedia for free!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!