未生成负位置实用程序类答案

【问题标题】：negative position utility classes not generated未生成负位置实用程序类
【发布时间】：2021-05-04 07:59:37
【问题描述】：

我正在尝试使用像 -left-1 这样的负位置实用程序类，但它们没有被生成。

我正在使用 2.0.2 版本并检查生成的 css，我可以看到这些类没有被生成，尽管常规的正类是。否定类在此页面上作为默认类列出：https://tailwindcss.com/docs/top-right-bottom-left。

我已尝试将配置重置为默认值：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

但它仍然不会生成文档页面顶部列出的否定类。

为什么没有生成这些类？

【问题讨论】：

您能否提供一个出现问题的最小可重现示例？

标签： tailwind-css

【解决方案1】：

它应该像文档中提到的那样工作。也许您的屏幕/视口正在使用溢出隐藏或其他方式隐藏负边距。

查看此working model for negative left-1

<div class="relative h-32 w-32 bg-green-100 mx-auto">
  <div class="absolute inset-x-0 top-0 -left-1 h-16 bg-green-300">1</div>
</div>

【讨论】：

问题是css中没有生成类-left-1。如果没有生成该类，则再多的 html 调整都无法使其正常工作。它必须生成才能使用。

【解决方案2】：

我以前从未生成过它，但我实现了它的工作。以下是我遵循的步骤。

npx tailwindcss-cli@latest init -p

我得到以下版本：tailwindcss 2.0.3，然后我正在生成它

npx tailwindcss-cli@latest build -c tailwind.config.js -o compiled.css

查看编译后的文件后，我可以看到它正确生成了所有负插入类，如.-inset-1。

PS：this playground example 确认它工作正常，只是为了确定。

【讨论】：