bug: CSS variables set in typography plugin settings are overriden

[dhnm]

What version of daisyUI are you using?

v4.7.2

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/r5c431Gu2Y?file=config

Describe your issue

I am using tailwind/typography plugin.

I want to define CSS variables in the tailwind config file for the plugin:

module.exports = {
  theme: {
      typography: {
        DEFAULT: {
          css: {
            "--tw-prose-body": "red",
            color: "var(--tw-prose-body)"
          }
        }
      }
  },
  plugins: [require("@tailwindcss/typography"), require('daisyui')]
}

This doesn't work, the text won't become red, but DaisyUI's settings will be applied instead.

Tailwind creates the following CSS:

/* Generated by Tailwind */
.prose {
  --tw-prose-body: "red";
}

The issue arises because DaisyUI creates the same variables that override tailwind ones like so:

/* Generated by DaisyUI */
:root .prose {
  --tw-prose-body: var(--fallback-bc,oklch(var(--bc)/0.8));
}

[github-actions]

Thank you @dhnm for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

daisyUI overrides the default colors coming from Typography plugin because otherwise, the colors will not adopt daisyUI themes. They will be the same color unless changed manually for each theme.

To override the CSS variable color manually you can do it from CSS like this:
https://play.tailwindcss.com/bgo17PqVB3?file=css

:root .prose{
  --tw-prose-body: red;
}

Or if you want to do it from the config file, using the JS object you can use !important (the reason is, Tailwind CSS puts styles from this object in a :where selector and it has low specificity so without !important it will not override the daisyUI colors)
https://play.tailwindcss.com/ahpNI7Dx66?file=config

Let me know if you have a question.