DEMO
CODE
<div class="demo-stage tt-stage"><label class="tt-switch"><input type="checkbox" class="tt-input" checked><span class="tt-slider"></span></label></div>
.tt-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.tt-switch { position:relative; display:inline-block; width:64px; height:34px; cursor:pointer; }
.tt-input { position:absolute; opacity:0; width:0; height:0; }
.tt-slider { position:absolute; inset:0; background:#3a3a42; border-radius:34px; transition:background .3s; }
.tt-slider::before { content:''; position:absolute; width:26px; height:26px; left:4px; top:4px; background:#fff; border-radius:50%; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.tt-input:checked + .tt-slider { background:#E91B89; }
.tt-input:checked + .tt-slider::before { transform:translateX(30px); }
上のライブデモはTailwind不要のCSS等価版です。下は peer / peer-checked（チェックボックスの状態で隣接divを制御するTailwind定番）で同じ動きになります。
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-16 h-9 bg-gray-600 rounded-full transition peer-checked:bg-pink-600
after:content-[''] after:absolute after:top-1 after:left-1
after:w-7 after:h-7 after:bg-white after:rounded-full after:transition
peer-checked:after:translate-x-7"></div>
</label>
AI PROMPT
ON/OFFのトグルスイッチをTailwindで作って。input に sr-only peer を付け視覚的に隠す。隣の div を w-16 h-9 bg-gray-600 rounded-full、peer-checked:bg-pink-600 でON色に。つまみは after擬似要素 after:w-7 after:h-7 after:bg-white after:rounded-full、peer-checked:after:translate-x-7 で右へスライド。peer/peer-checked はTailwindで兄弟要素の状態を参照する代表機能。フォームの設定トグルに。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
チェックボックスでON/OFFするトグルスイッチ。Tailwindの peer / peer-checked で隣接要素を制御する代表パターン。この効果はTailwind CSSのユーティリティクラスを中心に構成され、クラスの組み合わせだけでアニメーションやホバー状態を表現します。
フォーム入力・トグル・ボタン・お気に入りなど、小さな操作に対する手応え（マイクロインタラクション）に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。