带有前缀类的顺风负值答案

【问题标题】：tailwind negative value with prefix class带有前缀类的顺风负值
【发布时间】：2022-01-27 17:27:05
【问题描述】：

在我的tailwind.config.js 我已经设置了这个

module.exports = {
  prefix: "tw-",
}

然后我尝试了class="tw--top-4"，但没有反映top: '-4px'。我读了文档，负值可以是 class="-top-4" 但是你想用前缀怎么办？我也试过class="-tw-top-4"，但没有运气。

【问题讨论】：

好吧，top-4 将对应于 1rem，而不是 4px，除非您将文档默认字体大小设置为 4 像素。当您设置tw-top-4 时，通过“不走运”，您是否获得了最高设置？你在使用 React 和 JSX 吗？如果是这样，您应该使用className="..." 而不是class="..."！您也许可以使用tw-top-[4px] 设置绝对像素，但我会先了解基础知识。

标签： html css tailwind-css

【解决方案1】：

现在的工作变体是tw--top-4（但由于某种原因，自动完成显示-tw-top-4，这可能是一个错误），所以否定出现在前缀之后。 Github上有讨论，不过是这样的。

要实际应用它，您还需要为元素添加位置，例如relative 或 absolute 等（不要忘记你的前缀）

例子：

<div class="tw-text-red-500 tw-relative tw--bottom-4">
  One
</div>
<div class="tw-text-green-500">
  Two
</div>
<div class="tw-text-blue-500">
  Three
</div>

Playground

【讨论】：