Using props does not work

Given the following code

const TimelineCurrent = tw.div<{ position: number }>`
  absolute
  left-0
  top-[0.575rem]
  ${(p) => `w-[calc(${p.position}%-0.75rem)]`}
  h-[0.35rem]
`;

it renders the following HTML

<div position="100" class="absolute left-0 top-[0.575rem] w-[calc(100%-0.75rem)] h-[0.35rem]"></div>

But the w-[calc(100%-0.75rem)] part is not picked up by Tailwind JIT, so it has no effect. Am I doing something wrong here?

[mauriceackel]

JIT runs at build time, but your class name gets computed at runtime… Hence, tailwind does not know the actual name of the class at build time and cannot generate the CSS for it.

[alexjidras]

@azzlack that’s not an issue. You wrote the calc css syntax wrong. calc(100%-0.75rem) will not work even with css. You should add a space around the - operator. Like this calc(100% - 0.75rem). With tailwind spaces inside custom classes should be marked with _ so your final class should be w-[calc(100%_-_0.75rem)].