如何在 Tailwind 中导入的自定义类上使用悬停状态

Question

我正在开发一个

next.js

项目，我将我的

css

代码组织成多个

stylesheet

文件，并导入到

global.css

中。

我希望菜单项在其父级悬停时更改其颜色。

虽然自定义实用程序类只有当我直接将其放入

global.css

中才能工作。如果我将类导入为

.css

，则不行。

我检查了顺风的文档使用多个css文件 并按照以下步骤操作：

• 安装

  postcss-import

  插件，
• 在

  'postcss-import': {},

  处添加

  postcss.config.ts

  。
• 根据文档的要求将

  @import

  放在第一行构建时导入

这些都没有帮助。

这是我的代码： 在

global.css

：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
  @import "./assets/css/components/menu";
...

在

menu.css

：

.active {
    @apply text-Primary
  }

        <ul>
         <li class="group">
          <Link href="/hello" class="group-hover:active">Menu Item</Link>
        </li>
       </ul>

active

类不考虑令牌，而其他自定义类通过

@import

工作得很好。

我尝试将

active

类导入为

.css

下的

tailwind utility

层下面的 answer，它也不起作用。

欢迎所有指示或建议。谢谢。

Answer 1

好吧，我不明白这个问题。今天我打开

vscode

，粘贴相同的代码块，它就可以工作了。 我为感兴趣的人记录了这篇文章涵盖的主题：

• 在顺风中使用多个文件
• 与您自己的类一起使用带有修饰符（悬停、焦点、活动...）

Tailwind 的所有修饰符都可以与您自己的自定义类一起使用 只要您在 Tailwind 的某一层中定义它们或使用插件添加它们。

所以自定义类不一定在

utilities

层内，就我而言，我应该写这样的东西：

菜单.jsx

...
    <ul>
         <li class="group">
           <Link href="/hello" class="group-hover:active">Menu Item</Link>
        </li>
    </ul>
...

在

global.css

：

@import "tailwindcss/base";
     @import "./assets/css/components/menu";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

...

在

menu.css

@layer base{
.active {
    @apply text-Primary
  }
}

昨天，当我在

.active

中嵌入

@layer base{}

类时，顺风向我抛出了一个错误：

@layer base is used but no matching @tailwind base directive is present.

今天，该错误毫无理由地消失了。