## 概要下の2つにある`青色`の部分が選択された要素へスライドするアニメーションを行います． ![有彩色1](/img/css-template-tailwind/3-1.png) ![有彩色1](/img/css-template-tailwind/3-2.png) ## ソース 2通りのアプローチでスライドしつつ表示色を変えていきたいと思います． ### z-indexによるアプローチ ```tsx return

ラベル

{/* オーバーレイ */}

``` それぞれアイコン(`i-**-**`)は`@egoist/tailwindcss-icons`で参照しています．ボタンをクリックすることで`useState`の状態管理を使い選択先を記憶します．それぞれボタンはホバーした際に薄い灰色にします．あとは，選択された際に内部のアイコンが白くなるようにだけ準備しておきます．次にオーバーレイです．ボタンとしての判定が邪魔されないようにするべく，`pointer-events-none`で**当たり判定を消します．** そして絶対配置で`top`と`left`を設定し，ボタンとアイコンの間に配置されるよう`z-index`を調節します．すると，アイコンの色変更に邪魔されること無く目的の色を表現できます． `left`の位置をフラグによって変えることで位置調整が完了し，`transition-all`で移動アニメーションをつけて完成です．今回はbooleanを使っていますが，`useState`を使って3つ以上のボタンを並べ，オーバーレイのleftを乗算にすることも可能です． ### mix-blend-modeによるアプローチこれは，白黒のUIを作る時におすすめです．ソースからz-indexの情報を全て消し，アイコンは常時黒のままにしておきます．そして，オーバーレイを動かすことは同じですが，`mix-blend-exclusion`で除外設定のブレンドにする力で白黒反転させます． ```tsx return

ラベル

{/* オーバーレイ */}

``` ![無彩色](/img/css-template-tailwind/3-3.png) アイコンの色をブレンドで変えるので違和感なく自然な遷移になると思います．この方法は有彩色だとハードルが上がると思うためおすすめしません．ブレンドについて(MDN)

シリーズTailwind CSSのコピペ用シリーズ