Tailwind 不会以任意值渲染字体大小

Question

我正在尝试根据变量中的数字缩放

span

元素：

export default async function Tags() {
  const tags = await getTags();

  return (
    <div>
      <Suspense>
        <div className="flex flex-wrap">
          {tags.results?.map((tag) => (
            <span
              key={tag.id}
              className={`pr-4 text-[${tag.font}px]`}
            >
              {tag.name}
            </span>
          ))}
        </div>
      </Suspense>
    </div>
  );
}

如果我检查页面，它会创建所需的输出：

<div class="flex flex-wrap">
  <span class="pr-4 text-[17px]">cars</span>
  <span class="pr-4 text-[18px]">sports</span>
  ...
</div>

但页面上不显示。如果我用数字替换

${tag.font}

，它可以工作，但不能用变量替换。我做错了什么？

更新

似乎只有某些数字才有效，例如 20 和 36，但现在所有数字都有效。这是为什么？

Answer 1

它不起作用的原因是这样的：

Tailwind 如何提取类名的最重要含义是，它只会查找源文件中作为完整不间断字符串存在的类。

如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS。

Tailwind 中的动态类名称

20

和

36

可以工作的原因是因为你的代码库中的其他地方有这些类，并且TailwindCSS正在生成这些类。

当使用 Tailwind 时，您需要根据一些动态数据设置元素的样式，您应该使用 style 标签。

{tags.results?.map((tag) => (
    <span
        key={tag.id}
        className="pr-4"
        style={{fontSize: `${tag.font}px`}}
    >
        {tag.name}
    </span>
))}