Open
Description
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.
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Milestone
Relationships
Development
Participants
Activity
kbdshadow colors not being calculated on oklch colors #387brc-dd commentedon Mar 22, 2025
Can we support color-mix here? That would avoid the need for JS stuff like hexToRgb.
and
--tw-prose-kbd-shadowscan be set to color in any format.te6-in commentedon Mar 22, 2025
@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
isHexand also have to keephexToRgb. (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.0at some pointbrc-dd commentedon Mar 22, 2025
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)]