How to make daisyui preserve tailwind.config theme?

Question

I know that daisyui themes uses @apply text-sm for .btn and .input as default behavior.

But when configure it in tailwind.config.js

module.exports = {
  content: ['./src/**/*.{vue,js,ts}'],
  theme: {
    extend: {
      fontSize: {
        sm: '2rem',
      },
    },
  },
  plugins: [require('daisyui')],
};

It doesn't affect on a result.

Possible way to override styles through css

[data-theme='light'] .btn {
  @apply text-sm;
}

But we should tweak all changed default styles.

I wonder is there a way to make daisyui plugin preserve user tailwind.config.js theme?

sandbox - https://stackblitz.com/edit/daisyui-vue-vite-htu1is?file=tailwind.config.js

Answer 1

You can configure from your tailwind.config.js like this:

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

styled means - 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.

Find more here