`--tw-prose-kbd-shadows` is `NaN NaN NaN` since the colors are assumed to be hex
Closed this issue · 4 comments
What version of @tailwindcss/typography are you using?
v0.5.16
What version of Node.js are you using?
v22.14.0
What browser are you using?
Chrome 133.0.6943.127
What operating system are you using?
macOS
Reproduction repository
https://github.com/te6-in/tailwind-prose-repro
Describe your issue
From Tailwind CSS v4 the colors are in oklch, but the keyboard shadow colors generated here assume that the colors are in hex.
tailwindcss-typography/src/styles.js
Line 1062 in 632970e
So the values become NaN NaN NaN and no box shadow is shown.
I guess this can be replaced with color functions which have mostly the same browser availability as oklch. Or maybe we can try parsing and fallback to hex → rgb.
Can we support color-mix here? That would avoid the need for JS stuff like hexToRgb.
box-shadow: 0 0 0 1px color-mix(in oklab, var(--tw-prose-kbd-shadows) 10%, transparent), 0 3px 0 color-mix(in oklab, var(--tw-prose-kbd-shadows) 10%, transparent)and --tw-prose-kbd-shadows can be set to color in any format.
@brc-dd I'd love to see less js stuff here too but I'm afraid only relying to color-mix might break projects using tailwind v3. caniuse color-mix
As far as I know, at this moment users can install whatever version of this plugin regardless of their tailwind versions. I think we can use color-mix but at the same time need something like isHex and also have to keep hexToRgb. (more on #387)
On projects using tailwind v4, I'm sure using color-mix would be totally fine because v4 explicitly requires Chrome 114 and etc.
Or maybe we can just require >= tailwindcss@4.0.0 at some point
Ah, makes sense. I didn't realize v3 was also listed as peerDeps. Yeah maybe later then. Currently one can use arbitrary values or write one-off css for this: prose-kbd:shadow-[0_0_0_1px_color-mix(in_oklab,var(--tw-prose-kbd-shadows)_10%,transparent),0_3px_0_color-mix(in_oklab,var(--tw-prose-kbd-shadows)_10%,transparent)]
Hey folks! This is going to be fixed with the next release 👍