--tw-prose-kbd-shadows is NaN NaN NaN since the colors are assumed to be hex
#386
Comments
|
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 |
|
@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 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 |
|
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: |
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 NaNand 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.
The text was updated successfully, but these errors were encountered: