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

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="..."或 style="width: ..."。尽管由于是内联样式，这将具有很高的优先级。

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