Alpha values not reflected correctly when loading colors added by `tailwindcss-themer` from other plugins
dungsil opened this issue · comments
Describe the bug
When the value applied to the themer is called into the theme function, the is exposed as is (no color is applied).
Your minimal, reproducible example
https://github.com/dungsil/issues/tree/main/tailwindcss-themer-121
Steps to reproduce
- define color values in themer plugin
backgroundColor
,textColor
,borderColor
, etc... - After adding the new plugin, use the values extended by
tailwindcss-themer
. - the alpha value will be output as
<alpha-value>
when applied.
Expected behavior
It should output 1
, not <alpha-value>
.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: Windows 11
- Browser: Firefox Devlopment Edition
- Node.js : v20.10.0
tailwindcss-themer version
v4.0.0
Additional context
No response
Thanks for opening this. I'll take a look at it soon
It seems this is an existing bug/limitation within Tailwind. Looking at tailwind's open issues, it seems this should help tailwindlabs/tailwindcss#9143 (comment)
This worked for me
plugin(function ({ addBase }) {
addBase({
'#plugin': {
backgroundColor: "theme('backgroundColor.base')" // 👈🏻 Wrap it in a string instead
}
})
})
Does this work for you?
I'm going to close this preemptively as expected behavior.