Config

DaisyUI can be configured from your tailwind.config.js file

module.exports = {

    // add DaisyUI plugin
    plugins: [
      require('daisyui'),
    ],

    // config (optional)
    daisyui: {
      styled: true,
      themes: true,
      base: true,
      utils: true,
      logs: true,
      rtl: false,
    },

  }

Config values explained:

You can add a `daisyUI` object and change default config:

styled

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

default: true

If it's true, all themes will be included.
If it's false, only light theme will be available.
themes config can be an array of theme names:


  daisyui: {
    themes: [
      'emerald', // first one will be the default theme
      'dark',
      'forest',
      'synthwave'
    ],
  },

The first item of array will be the default theme.
if no theme is chosen on <html data-theme="THEME_NAME"> and dark theme is in themes config, default theme and dark theme will be activated based on operating system preferences.
read more about default themes


You can add your custom themes in config:

  daisyui: {
    themes: [
{ 'mytheme': { // custom theme 'primary' : '#ea5234', 'primary-focus' : '#d43616', 'primary-content' : '#ffffff', // other colors }, 'myothertheme': { // custom theme 'primary' : '#007ebd', 'primary-focus' : '#005c8a', 'primary-content' : '#ffffff', // other colors }, },
'dark', // and some pre-defined theme 'forest', 'synthwave' ], },
read more about adding themes

base

default: true

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

utils

default: true

If it's true, a few utility classes will be added

logs

default: true

If it's true, DaisyUI shows logs in terminal while CSS is building

rtl

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 also suggest using tailwindcss-flip plugin. It flips all your tailwind utilities automatically.