有没有办法在@apply 中使用自定义类？答案

【问题标题】：is there any way to use custom classes in @apply?有没有办法在@apply 中使用自定义类？
【发布时间】：2023-01-26 20:51:30
【问题描述】：

我不能在@apply 中使用自定义类

正如您在 tailwind CSS 中应该知道的那样，您可以像这样在 tailwind.config.js 中创建自定义类：

extend: {
      boxShadow:{
        "specific":'rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px'

      }
    },
  },

你可以在标签中调用这个类并使用它。但是当我想在@apply 中使用这个类时，我遇到了这个错误：

The `shadow-specific` class does not exist. If `shadow-specific` is a custom class, make sure it is defined within a `@layer` directive.

这就是我如何将类与@apply 一起使用：

.product .title {
   @apply py-2 font-extrabold text-lg md:text-base shadow-specific;
}

我也在 index.css 中使用 @layer 指令定义类。

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components{
  .shadow-specific{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }
}

【问题讨论】：

标签： reactjs tailwind-css

【解决方案1】：

类不应该在@apply 里面。

正确的方法：

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components{
  .shadow-specific{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }
}

然后在您的组件上，例如：

<div className="shadow-specific">

【讨论】：