与顺风动态内联更改类属性

Question

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

例如，我想动态更改宽度，而不是使用预制的顺风 w-1、w-2 等...

<div
  class="p-1 border-2 width: {createTimeBlock(
    show.startTime,
    show.endTime,
  )}px">
  {show.startTime} to {show.endTime}
</div>

Answer 1

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

最简单的事情可能是只使用style:width="..."or style="width: ..."。尽管由于是内联样式，这将具有很高的优先级。

或者，您可以创建一个本地组件类，从自定义属性中读取宽度，然后使用 CSS 属性语法设置该属性，例如style:--width="..." for elements或--width="..." for Components，或通过 style 属性 as style="--width: ..."。