如何在纯CSS中顺风顺水使用@Apply？

问题描述

我在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>

出什么问题了？

解决方法

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

,

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

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