顺风CSS：‘`outline`’类不存在。然而，这不是一个自定义样式，而是一个框架类。

Question

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

收到的错误：

outline类不存在。如果您确信outline存在，请确保在Tailwind看到您的CSS之前，所有@import语句都被正确处理，因为@apply只能用于同一CSS树中的类。

这在一个组件的@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 {
      ...
   }

对此的任何见解都将受到高度赞赏，因为没有引用(顺风文档或它们的回购错误)以可行的方式解决这个问题，每个示例都发现用户错误。这可能就是这里的情况，但我还没有找到问题。

Answer 1

不能将类应用于自身。outline已经被定义(默认的顺风类之一)，您正在尝试再次定义和应用它。

参见错误：https://play.tailwindcss.com/cdQLeYFcNH?file=css

错误

<css input>：使用：@apply outline时检测到的循环依赖关系

使用不同的自定义类。就像.custom-outline：https://play.tailwindcss.com/qo8M6Zkj31