用顺风动态地改变类属性

Question

如何使用带有顺风内联css的字符串文字传递动态值？

例如，我想动态地改变宽度，而不是使用预制件w-1，w-2等.

​

​

Answer 1

正确的语法将是w-[${...}px]，但是Tailwind依赖于静态已知的类，因此这可能无法工作。

最简单的事情可能是只使用style:width="..."或style="width: ..."。虽然这将具有很高的优先级，因为它是一个内联样式。

或者，您可以创建一个从自定义属性读取宽度的本地组件类，然后使用CSS属性语法设置该属性，例如--width="..." (用于组件)或通过样式设置为style="--width: ..."。

Answer 2

另一方面，如果createTimeBlock将返回一个固定的值集(例如[v1, v2, .... vN] )，其中有一个固定的宽度值集(假设creatTimeBlock只返回15分钟的增量)，那么您可以这样做。

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

注意，实际的.width_v1类实际上可以是一个顺风的本机宽度类，比如w-8。希望这能有所帮助。