Tailwind CSS：如何为锚标记启用组悬停

Question

当我运行将鼠标悬停在 play.tailwindcss.com

时，我的代码正常工作

但是当我在我的本地文件中复制相同的代码时，组悬停在那里不起作用；

我应该在我的 tailwind.config.css 文件中包含哪些内容才能在我的案例中启用群组悬停？

代码：

 <div class="group">
<a href="#" class=" font-bold text-gray-700 ">Menu</a>
 <div class="hidden group-hover:block absolute bg-white shadow-md w-auto p-4">
  
  <a href="#" class="p-2 block font-bold text-gray-700 hover:bg-gray-200">option 1</a>
  <a href="#" class="p-2 block font-bold text-gray-700 hover:bg-gray-200">option 1</a>
   <a href="#" class="p-2 block font-bold text-gray-700 hover:bg-gray-200">option 1</a>
   <a href="#" class="p-2 block font-bold text-gray-700 hover:bg-gray-200">option 1</a>
 </div>

Answer 1

Playground 使用 JIT 模式，因此您的选项 1 是启用 JIT 模式。

选项 2 是将 group-hover 变体添加到您的显示实用程序中，如此处所示 https://tailwindcss.com/docs/display#variants

如果您在其他任何地方使用显示变体，您也需要添加这些变体，它可能看起来像这样。

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       display: ['hover', 'focus', 'group-hover'],
      }
    }
  }

Tailwind CSS：如何为锚标记启用组悬停

Tailwind CSS: How to enable group hover for anchor tag

css

tailwind-css