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

【问题标题】：Tailwind CSS: How to enable group hover for anchor tagTailwind CSS：如何为锚标记启用组悬停
【发布时间】：2021-12-13 02:22:59
【问题描述】：

当我在play.tailwindcss.com上运行组悬停时，我的代码正常工作

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

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

DEMO

代码：

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

【问题讨论】：

标签： css tailwind-css

【解决方案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'],
      }
    }
  }

【讨论】：

谢谢，我添加了显示工具！