Every token is a CSS variable, declared in :root the first time something on the page asks for it, and used through var() everywhere after that. That is what makes a colour cheap to repeat and possible to override — and why the values below are oklch() rather than hex: the palette is Tailwind 4.3's, so a component copied from there keeps its colours.
:root {
--blue-500: oklch(62.3% .214 259.8); /* lightness, chroma, hue */
}
/* bgColor="blue-500" */
.bgColor-blue-500 {
background-color: var(--blue-500);
}Five neutrals, the four Tailwind 4.3 added (mauve, mist, olive, taupe) and the seventeen hues. Hover a swatch for the value behind it.
A slash and a number on any colour value — bgColor="blue-500/40" — is the token at 40% opacity. It is Tailwind's spelling of the same thing, it works on every colour prop, and it nests wherever a colour does: inside a hover, a theme, a breakpoint, a cq.
<Flex gap={3}>
<Box width={16} height={16} borderRadius={2} bgColor="violet-500/100" />
<Box width={16} height={16} borderRadius={2} bgColor="violet-500/80" />
<Box width={16} height={16} borderRadius={2} bgColor="violet-500/60" />
<Box width={16} height={16} borderRadius={2} bgColor="violet-500/40" />
<Box width={16} height={16} borderRadius={2} bgColor="violet-500/20" />
</Flex>opacity fades the whole element — its text, its border, its children. The modifier fades one declaration, because it compiles to a color-mix() against transparent: the token stays a var(), so a themed colour is still themed and every element asking for the same value still shares one class. The mix is done in oklab — mixing towards transparency in a polar space would drag the hue along with it.
/* bgColor="blue-500/40" */
.bgColor-blue-500\/40 {
background-color: color-mix(in oklab, var(--blue-500) 40%, transparent);
}A variable declared through Box.extend() is a colour value on every one of those props, and the modifier applies to it unchanged — the mix reaches the variable, whatever it was declared as. A token the palette does not have (or a percentage outside 0–100) is not a colour: it produces no rule and no class name, the way every unmatched value does.
// once, before the first render
Box.extend({ brand: 'oklch(62% 0.19 264)' });
<Box bgColor="brand" b={1} borderColor="brand/30">
Brand, and its border at 30%
</Box>;