<kbd
// In this component I want to test some
className={cn(
firaCode.className,
"px-1.5 py-0.5",
"text-inherit",
"font-semibold text-heading",
<kbd
// In this component I want to test some
className={cn(
firaSans.className,
"px-1.5 py-0.5",
// "text-inherit",
"text-[0.9em]",
"font-semibold text-heading",
"bg-(--kbd-bg-color)",
"border border-(--kbd-border-color) rounded",
"shadow-[0_2px_0_1px_var(--kbd-color-border)]",
className,
)}
{...rest}
>
{children}
</kbd>oklch like this oklch(75% 0.183 55.934) which represents in this case nice and juicy orange color. tip: use Shift to get HEX 😉.
This feature with copy is great, but if we will want to use tailwind and the colors we do not want in this case use oklch each time to refer to the color - that would be INSANE! Therefore you should read further with tailwind docs and the you would discover better way, as there is quite nice references to color variables (default) we could use instead. That's why the initial reference with colors is so nice as you can clearly see the color and numeric reference - same in vars! That's what we looking for.