如何在纯 CSS 中使用来自顺风的 @Apply？答案

【问题标题】：How to use @Apply from tailwind in plain CSS?如何在纯 CSS 中使用来自顺风的 @Apply？
【发布时间】：2020-12-05 10:54:25
【问题描述】：

我在 React 项目中使用 tailwindcss。

我是这样调用类的：

<p className="text-gray-600 text-base-14">
        <Link to="/code">{props.name}</Link>
</p>

事实上，有时我需要很多类（15 -20），将它们写在 JS 文件中并不是一个好习惯。

在Nuxt.js 我使用的是：

 <style type="postcss">
   .prg{
     @apply text-gray-600;
     @apply text-base-14;
   }
   </style>

然后我在组件（Vue组件）中使用prg类

我在 React 上尝试过同样的方法，但它不起作用！

 <p className="prg">
            <Link to="/code">{props.name}</Link>
        </p>

有什么问题？

【问题讨论】：

你用的是什么前端框架？这是 React.js 吗？
@apply 不是标准 CSS 的一部分，它需要 CSS 预处理器（例如 SASS）：stackoverflow.com/questions/41067550/what-is-apply-in-css/…
有没有办法在独立的 CSS 文件中调用这些类？

【解决方案1】：

从tailwindcss docs 开始，如果您想使用基于 Tailwind 类的自定义类，请将它们添加到您的全局 CSS 文件（您的 @tailwind 指令所在的位置）。

【讨论】：

【解决方案2】：

您必须像这样为您的src/index.css 文件定义一个实用程序类：

.prg{
    @apply text-gray-600;
    @apply text-base-14;
}

【讨论】：