La sintaxis correcta sería w-[${...}px] , pero Tailwind depende de que las clases se conozcan estáticamente, por lo que probablemente esto no funcione.

Lo más fácil probablemente sería simplemente usar style:width="..." o style="width: ..." . Aunque esto tendrá una gran prioridad debido a que es un estilo en línea.

Alternativamente, puede crear una clase de componente local que lea el ancho de una propiedad personalizada, luego establezca la propiedad usando la sintaxis de atributo CSS , por ejemplo, --width="..." (para componentes) o mediante el estilo como style="--width: ..." .

Al revés, si createTimeBlock devolverá un conjunto fijo de valores (digamos [v1, v2, .... vN] ) para el cual hay un conjunto fijo de valores de ancho para establecer (suponiendo creatTimeBlock devuelva solo incrementos de 15 minutos, por ejemplo ), Puedes hacerlo.

 <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>

Tenga en cuenta que la clase .width_v1 real en realidad puede ser una clase de ancho nativo para viento de cola como, por ejemplo w-8 . Espero que esto ayude.