何がしたいか
マウスをホバーしたとき、ボタン内の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
を付けるのを忘れがちなので注意してください!
参考