bug: CSS variables set in typography plugin settings are overriden
dhnm opened this issue · 2 comments
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));
}
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.
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.