The correct syntax would be w-[${...}px], but Tailwind relies to classes to be statically known, so this will probably not work.

The easiest thing would probably be to just use style:width="..." or style="width: ...". Though this will have high precedence due to being an inline style.

Alternatively, you can create a local component class that reads width from a custom property, then set the property using CSS attribute syntax, e.g. --width="..." (for components) or via style as style="--width: ...".

The other way around, if createTimeBlock will return a fixed set of values ( say [v1, v2, .... vN] ) for which there is a fixed set of width values to set ( assuming creatTimeBlock returns only increments of 15mins for example ), you can do this.

<script>
$timeblock = createTimeBlock( startTime, endTime );
</script>

<div
 class="p-1 border-2..."
 class:width_v1={timeblock === v1}
 class:width_v2={timeblock === v2}
 ...
 class:width_vN={timeblock === vN}
>
 {startTime} to {endTime}
</div>

<style>
 .width_v1{ 
   width: v1_width_px; 
 }
 .width_v2{ width: v2_width_px; }
 ....
 .width_vN{ width: vN_width_px; }
</style>

Note, the actual .width_v1 class can actually be a native width class to tailwind like say w-8. Hope this helps.