在 Tailwind 中使用 @apply 指令需要帮助 CSS

Question

我发现@apply 指令是一种重用代码的简单方法，但是当我在 tailwind 中使用 @apply 指令时 css 它向我显示错误你不能 @apply btn 实用程序，因为它会创建循环依赖。

这是我的HTML代码

            <a class="bg-transparent border btn border-black hover:bg-black hover:text-white px-6 py-2 rounded-2xl"
                href="">Browse</a>
            <a>Look</a>

我想在我的第二个标签中使用第一个标签的类 @apply 指令

这是我的顺风 css 文件，我在其中放置了 @apply 指令

@tailwind base;
@tailwind components;

.btn{
@apply bg-transparent border btn border-black hover:bg-black hover:text-white px-6 py-2 rounded-2xl;
}
@tailwind utilities;

Answer 1

此错误一直显示，因为您在 CSS 文件

中添加了 btn class

你的HTML应该是这样的：

<a class="btn" href="">Browse</a>

<a>Look</a>

你的CSS应该是这样的：

@tailwind base;
@tailwind components;
.btn{
@apply bg-transparent border  border-black hover:bg-black hover:text-white px-6 py-2 rounded-2xl;
}
@tailwind utilities;

此外，使用 @layer components 添加组件是更好的做法，这样您就可以在任何需要的地方添加新组件 class，而不仅仅是在 @tailwind components; 和 [=16= 之间]

更好的做法

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components{
  .btn{
      @apply bg-transparent border  border-black hover:bg-black hover:text-white px-6 py-2 rounded-2xl;
    }
}

参见 tailwind PLAY

上的示例

在 Tailwind 中使用 @apply 指令需要帮助 CSS

Need help using @apply directive in Tailwind CSS

tailwind-css