您为两个块指定了​​相同的类。当悬停时，接收悬停的元素的属性会发生变化。也就是说，当您将鼠标悬停在文本上时，文本的 fill 属性会发生变化，而不是 SVG。

对于您的任务，您应该仅将 .nav-icon 类用于父 <a> 元素。并更改两个元素的 :hover CSS 属性：

body {
  background: grey;
}

.nav-icon {
  color: red;
}

.nav-icon svg {
  fill: white;
}

.nav-icon:hover {
  color: white;
}

.nav-icon:hover svg {
  fill: red;
}

<a href="#" class="nav-icon text-gray-300 hover:text-gray-100 flex items-center py-2 px-2 text-sm font-medium rounded-md group border-l-4 border-transparent">
  <svg width="20" height="20" class="flex-none mr-3 text-gray-400 xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
   <path d="M2.3999 6.0001C2.3999 4.67461 3.47442 3.6001 4.7999 3.6001H13.1999C14.5254 3.6001 15.5999 4.67461 15.5999 6.0001V10.8001C15.5999 12.1256 14.5254 13.2001 13.1999 13.2001H10.7999L7.1999 16.8001V13.2001H4.7999C3.47442 13.2001 2.3999 12.1256 2.3999 10.8001V6.0001Z"/>
   <path d="M17.9999 8.4001V11.6001C17.9999 13.8092 16.209 15.6001 13.9999 15.6001H11.794L9.67397 17.7201C10.0097 17.8988 10.393 18.0001 10.7999 18.0001H13.1999L16.7999 21.6001V18.0001H19.1999C20.5254 18.0001 21.5999 16.9256 21.5999 15.6001V10.8001C21.5999 9.47461 20.5254 8.4001 19.1999 8.4001H17.9999Z"/>
   </svg>
   Message
</a>

很难从提供的代码中确切地说出您要完成的任务。但是这里有一些您可能有兴趣使用 Tailwind 来完成的情况，并且实际上不需要额外的 CSS。

情况 1 - 悬停时相同颜色的图标和文本颜色变化

这是最常见的情况，用户将鼠标悬停在元素上，图标和文本一起变化。为此，您只需要 SVG 上的类 fill-current 和父元素上的 hover:text-{your-color} （在您的情况下是锚标记）。这是 https://play.tailwindcss.com/Zy2tdj05Tf

一个简单的例子如下：

<a href="#" class="text-gray-400 hover:text-white">
  <svg class="fill-current"> <!-- some svg code --> </svg>
</a>

来自 Tailwind 游戏的完整代码是：

<a href="#" class="bg-blue-900 text-gray-400 hover:text-white flex items-center py-2 px-2 text-sm font-medium rounded-md group border-l-4 border-transparent">
   <svg width="20" height="20" class="flex-none mr-3 fill-current" aria-hidden="true">
     <path d="M2.3999 6.0001C2.3999 4.67461 3.47442 3.6001 4.7999 3.6001H13.1999C14.5254 3.6001 15.5999 4.67461 15.5999 6.0001V10.8001C15.5999 12.1256 14.5254 13.2001 13.1999 13.2001H10.7999L7.1999 16.8001V13.2001H4.7999C3.47442 13.2001 2.3999 12.1256 2.3999 10.8001V6.0001Z"/>
     <path d="M17.9999 8.4001V11.6001C17.9999 13.8092 16.209 15.6001 13.9999 15.6001H11.794L9.67397 17.7201C10.0097 17.8988 10.393 18.0001 10.7999 18.0001H13.1999L16.7999 21.6001V18.0001H19.1999C20.5254 18.0001 21.5999 16.9256 21.5999 15.6001V10.8001C21.5999 9.47461 20.5254 8.4001 19.1999 8.4001H17.9999Z"/>
   </svg>
   Message
</a>

情况 2 - 悬停时图标和文本颜色不同

不太常见的是，用户悬停时图标和文本都会发生变化，但彼此的颜色不同。这是一个类似的设置，但您需要将父元素设为一个组并使用 group-hover 在 SVG 上独立更改文本颜色。这是 https://play.tailwindcss.com/Jsx4bOtQwx

最简单的版本是：

<a href="#" class="text-gray-400 hover:text-white group">
  <svg class="group-hover:text-red fill-current"> <!-- some svg code --> </svg>
</a>

Play 示例中的完整代码是：

<a href="#" class="bg-blue-900 text-gray-400 group hover:text-green-600 flex items-center py-2 px-2 text-sm font-medium rounded-md group border-l-4 border-transparent">
    <svg width="20" height="20" class="flex-none group-hover:text-red-600 mr-3 fill-current" aria-hidden="true">
      <path d="M2.3999 6.0001C2.3999 4.67461 3.47442 3.6001 4.7999 3.6001H13.1999C14.5254 3.6001 15.5999 4.67461 15.5999 6.0001V10.8001C15.5999 12.1256 14.5254 13.2001 13.1999 13.2001H10.7999L7.1999 16.8001V13.2001H4.7999C3.47442 13.2001 2.3999 12.1256 2.3999 10.8001V6.0001Z"/>
      <path d="M17.9999 8.4001V11.6001C17.9999 13.8092 16.209 15.6001 13.9999 15.6001H11.794L9.67397 17.7201C10.0097 17.8988 10.393 18.0001 10.7999 18.0001H13.1999L16.7999 21.6001V18.0001H19.1999C20.5254 18.0001 21.5999 16.9256 21.5999 15.6001V10.8001C21.5999 9.47461 20.5254 8.4001 19.1999 8.4001H17.9999Z"/>
    </svg>
    Message
</a>