【TailwindCSS】ボタンをホバーしたとき中身の要素も連動させて変化させる

何がしたいか

マウスをホバーしたとき、ボタン内のSVGと文字も連動して白くしたい

<div class="flex w-screen h-screen justify-center items-center">
    <button
      class="
        flex
        justify-center
        items-center
        w-32
        p-1
        border border-black
        rounded-md
        hover:bg-blue-300
      "
    >
      <svg class="w-4 h-4" viewBox="0 0 512 512">
        <g>
          <path
            class="st0"
            d="M490.013,171.964H340.031V21.992C340.031,9.845,330.177,0,318.032,0h-124.08c-12.146,0-22,9.845-22,21.992
		v149.973H21.987c-12.146,0-21.983,9.845-21.983,21.992v124.096c0,12.145,9.837,21.983,21.983,21.983h149.966v149.981
		c0,12.138,9.853,21.983,22,21.983h124.08c12.146,0,21.999-9.845,21.999-21.983V340.036h149.982
		c12.146,0,21.983-9.838,21.983-21.983V193.956C511.996,181.81,502.159,171.964,490.013,171.964z M92.897,293.499l-59.072-37.496
		l59.072-37.503V293.499z M256,478.179l-37.495-59.072h74.974L256,478.179z M218.505,92.9l37.479-59.08l37.495,59.08H218.505z
		 M419.103,293.499v-74.998l59.072,37.496L419.103,293.499z"
          ></path>
        </g>
      </svg>
      <span class="mx-3">Button</span>
    </button>
  </div>

結論

group-hoverとfill-currentを使う

 <div class="flex w-screen h-screen justify-center items-center">
    <button
      class="
+       group
        flex
        justify-center
        items-center
        w-32
        p-1
        border border-black
        rounded-md
        hover:bg-blue-300
      "
    >
-     <svg class="w-4 h-4" viewBox="0 0 512 512">
+     <svg class="w-4 h-4 fill-current group-hover:text-white" viewBox="0 0 512 512">
        <g>
          <path
            class="st0"
            d="M490.013,171.964H340.031V21.992C340.031,9.845,330.177,0,318.032,0h-124.08c-12.146,0-22,9.845-22,21.992
		v149.973H21.987c-12.146,0-21.983,9.845-21.983,21.992v124.096c0,12.145,9.837,21.983,21.983,21.983h149.966v149.981
		c0,12.138,9.853,21.983,22,21.983h124.08c12.146,0,21.999-9.845,21.999-21.983V340.036h149.982
		c12.146,0,21.983-9.838,21.983-21.983V193.956C511.996,181.81,502.159,171.964,490.013,171.964z M92.897,293.499l-59.072-37.496
		l59.072-37.503V293.499z M256,478.179l-37.495-59.072h74.974L256,478.179z M218.505,92.9l37.479-59.08l37.495,59.08H218.505z
		 M419.103,293.499v-74.998l59.072,37.496L419.103,293.499z"
          ></path>
        </g>
      </svg>
-      <span class="mx-3">Button</span>
+      <span class="mx-3 group-hover:text-white">Button</span>
    </button>
  </div>

親要素にgroupを付けるのを忘れがちなので注意してください！

参考