Tailwind CSS：“大纲”class 不存在。但这不是自定义样式，而是框架 class

Question

在一个新项目中，我得到了奇怪的行为，除了大纲和相关内容之外，一切都按预期工作：https://tailwindcss.com/docs/outline-style

收到的错误：

The outline class does not exist. If you're sure that outline exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

这是组件的 @apply，例如：

    .button {
        @apply bg-primary hover:bg-secondary;
    }

    .primary {
        @apply border-2 md:border-none border-primary md:border-transparent;
    }

但这不起作用：

    .outline {
        @apply outline outline-2 outline-offset-2 focus:outline-yellow-500;
    }

为了确保这是在同一个导入树中，这些应用在 index.css 作为组件层的一部分：

   @layer components {
      ...
   }

任何对此的见解都将受到高度赞赏，因为 none 的参考资料（顺风文档，而不是他们的 repo 错误以可行的方式解决了这个问题，每个示例都发现了用户错误。这可能只是就是这里的情况，但我还没有找到问题。

Answer 1

您不能将 class 应用于自身。 outline 已经定义（默认顺风 classes 之一），您正在尝试再次定义和应用它。

看到错误：https://play.tailwindcss.com/cdQLeYFcNH?file=css

Error

<css input>: Circular dependency detected when using: @apply outline

使用不同的习俗class。喜欢.custom-outline：https://play.tailwindcss.com/qo8M6Zkj31

Tailwind CSS：“大纲”class 不存在。但这不是自定义样式，而是框架 class

Tailwind CSS: The `outline` class does not exist. Yet this is not a custom style, but a framework class

css

postcss

tailwind-css