この記事はワイ記法です。やめ太郎@Yametaro氏にリスペクトをこめて。
ある日の我が家
ワイ「去年趣味でアプリ作っていたんやが」
ワイ「この頃はあまり見た目に拘ってなかったなぁ」
ワイ「ヤクルトも日本一になったし、この際セルフリメイクしてみよか！」1
Tailwind CSSを使ってみた
ワイ「はぇーBootstrapだけじゃなくて」
ワイ「Tailwind CSSってのもあるんか」
ワイ「前回はBootstrapやったし、Tailwind CSSを使ってみるか」
ラジオボタンをどうにかしたい
ワイ「ラジオボタンそのまま表示するのもなんか味気ないな・・・」
ワイ「どれどれ・・・ラジオボタンをボタン風に表示させることもできるんか」2
ワイ「これをTailwind CSSでいっちょやってみっか！」
まず通常通りラジオボタンを配置する
ワイ「まずは普通にラジオボタンを配置してみよか」
<body>
<div>
<input type="radio" name="central" id="swallows" value="東京ヤクルトスワローズ">
<label for="swallows">東京ヤクルトスワローズ</label>
</div>
<div>
<input type="radio" name="central" id="tigers" value="阪神タイガース">
<label for="tigers">阪神タイガース</label>
</div>
<div>
<input type="radio" name="central" id="giants" value="読売ジャイアンツ">
<label for="giants">読売ジャイアンツ</label>
</div>
<div>
<input type="radio" name="central" id="carp" value="広島東洋カープ">
<label for="carp">広島東洋カープ</label>
</div>
<div>
<input type="radio" name="central" id="dragons" value="中日ドラゴンズ">
<label for="dragons">中日ドラゴンズ</label>
</div>
<div>
<input type="radio" name="central" id="baystars" value="横浜DeNAベイスターズ">
<label for="baystars">横浜DeNAベイスターズ</label>
</div>
</body>
ワイ「まずはこんなもんか」
ワイ「Tailwind CSSを導入して」
ワイ「ラジオボタンのclassにhiddenをつけると○が非表示になるんやな」
〜略〜
<div>
<input type="radio" name="central" id="swallows" value="東京ヤクルトスワローズ" class="hidden">
<label for="swallows">東京ヤクルトスワローズ</label>
</div>
〜略〜
ワイ「お！いけるやん！」
ワイ「じゃあボタンっぽい表示にしよか」
〜〜試行錯誤中〜〜
ワイ「これでどやろか」
ワイ「labelのclassに色々追加してみたで」
〜〜略〜〜
<div>
<input type="radio" name="central" id="swallows" value="東京ヤクルトスワローズ" class="hidden">
<label for="swallows" class="flex flex-col w-full max-w-lg mx-auto text-center border-2 rounded-2xl border-gray-900 p-2 my-4 text-3xl">東京ヤクルトスワローズ</label>
</div>
〜〜略〜〜
ワイ「おっええやん」
ワイ「ボタンっぽくなったね（ニッコリ）」
もうちょい映えさせたい
ワイ「このままだとちょっと寂しいのは変わらんなぁ」
ワイ「ドキュメント眺めてみよか」
ワイ「hoverってのがあるんか」
ワイ「カーソル乗せてる時に色変わったら見やすいんちゃうか？」
〜〜略〜〜
<div>
<input type="radio" name="central" id="swallows" value="東京ヤクルトスワローズ" class="hidden">
<label for="swallows" class="flex flex-col w-full max-w-lg mx-auto text-center border-2 rounded-2xl border-gray-900 p-2 my-4 text-3xl hover:bg-yellow-200">東京ヤクルトスワローズ</label>
</div>
〜〜略〜〜
ワイ「これなら今何を選ぼうとしてるかはっきりわかんだね」
本題：クリックした項目の背景色を変える
ワイ「これはええんやけど」
ワイ「このままだとどれを選択したかはわからないんやな」
ワイ「ということは」
ワイ「今度は選択したら背景色を変えるようにすればええんやな」
ワイ「このcheckedみたいにしたらええんかな？」
ワイ「checked:bg-green-200を追加してみたで」
〜〜略〜〜
<div>
<input type="radio" name="central" id="swallows" value="東京ヤクルトスワローズ" class="hidden">
<label for="swallows" class="flex flex-col w-full max-w-lg mx-auto text-center border-2 rounded-2xl border-gray-900 p-2 my-4 text-3xl hover:bg-yellow-200 checked:bg-green-200">東京ヤクルトスワローズ</label>
</div>
〜〜略〜〜
確認のため、選択した項目を下に表示しています。
ワイ「あれれ〜？」
ワイ「確実にクリックされてるはずなのに」
ワイ「背景色が変わらん・・・」
娘(４歳)3「パパー」
娘「そのcheckedはcheckboxの時に使えるやつなの」
娘「ラジオボタンでは使えないのよ」
ワイ「なんやて！」
ワイ「（4歳なのに既にワイよりTailwind CSSを理解している・・・！？」
ワイ「娘ちゃん、どこでそんなの知ったんや」
娘「先生がよく読み聞かせをしてくれるの」
ワイ「（今時の保育園はドキュメントの読み聞かせをしてるんか・・・？）」
ワイ「（ワイは幼稚園通いだったからぐりとぐらばっか読んでたわ・・・）」
ワイ「で、でも娘ちゃん。そしたらクリックした箇所の背景色を変えるのはできないってことなんか？」
娘「ググっても日本語の記事が出ないからって諦めちゃダメよ」
娘「それに、ちゃんとStack Overflowに同じ質問があったよ」
娘「その回答によると」
娘「Tailwind CSS v2.1以上で使えるJust-in-Timeモードにした上で」
娘「inputの方のclassにpeerを追加して」
娘「labelの方のclassにpeer-checkedを追加すると」
娘「チェックした時にどうするか指定できるみたいね」
〜〜略〜〜
<div>
<input type="radio" name="central" id="swallows" value="東京ヤクルトスワローズ" class="hidden peer">
<label for="swallows" class="flex flex-col w-full max-w-lg mx-auto text-center border-2 rounded-2xl border-gray-900 p-2 my-4 text-3xl hover:bg-yellow-200 peer-checked:bg-green-200">東京ヤクルトスワローズ</label>
</div>
〜〜略〜〜
娘「今回はpeer-checked:bg-green-200にして、緑になるようにしてみたの」
娘「ほらできたでしょ（ﾄﾞﾔｯ）」
ワイ「はぇ〜すっごい・・・」
娘「ちなみにJust-in-Timeモードについては「こ↑こ↓」をみてね」
娘「CDNで試してみたい場合は、<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>を使うといいみたい」
ワイ「サンキュームッスメ」
ワイ「ちょっとこれでやってみるわ！」
数日後
ワイ「いやー娘ちゃんのおかげでなんとかいい感じにできたわ」
ワイ「根を詰めたから22時には寝てもうたわ！」
ヨッメ「（一体いつ作業していたのかしら・・・）」
ワイ「ひとまず現状のスキルとしては十分やな彡(^)(^)」
ワイ「良かったら使ってみてくれやで〜彡(^)(^)」
参考
- CSSだけでボタン風のラジオボタン
- TailwindCSS - Change Label When Radio Button Checked
- Tailwind CSS v2.2
- 説明用に作成したコードはこちら
- Qiitaにアップする画面動画をgifアニメで簡単に作ろう
おまけ