feat: ability to copy colors in v4 docs

[ryanhaticus]

• Enables the ability to copy colors in the v4 /docs/colors page.
• Converts oklch to hex as it's more recognizable from a DX perspective. This should be okay because the color palette doesn't utilize values.

Gif:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tailwindcss-com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 23, 2025 4:26am

[tristonarmstrong]

Dude said, "let there be tabs" #REJECTED lol

[DerpyDinosaur]

Nice looks great 👍🏻

[tristonarmstrong]

Oof @

• Safari 18.1.1
• Sequoia 15.1.1 (24B91)

Screen.Recording.2025-01-22.at.11.35.58.PM.mov

[ryanhaticus]

@philipp-spiess, thoughts on this quality of life change? Perhaps someone with more knowledge regarding Headless UI can fix the issues @tristonarmstrong mentioned.

[philipp-spiess]

Hey there! Thanks for the contribution. I think it's a good idea to add a tooltip to our color swatches that shows the value and/or the CSS variable name and allows you to quickly copy this value but we'll probably wait to land this to this until we have polished the tooltip experience in general (there are some issues that we don't like on the homepage tooltip too). Let me take a look at this this next week 👍

As a side node: The conversion to hex values here is probably not a good idea. I understand that hex codes are more common but the reason we used oklch(…) is because with Tailwind CSS v4 we are using on a wide-gamut color palette that often contains colors outside of the rgb spectrum. Because the color space of oklch is bigger than that of rgb, it means that converting from one into the other is loosing information and as a result of that you will not end up with the same color.