`--tw-prose-kbd-shadows` is `NaN NaN NaN` since the colors are assumed to be hex

[te6-in]

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

'--tw-prose-kbd-shadows': hexToRgb(colors.slate[900]),

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.

[brc-dd]

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.

[te6-in]

@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

[brc-dd]

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)]