tailwindcssでのpeerの注意点
投稿日:2024/4/2
結論
peer-〇〇:をつかう際はpeerクラスをつけた要素のあとに書きましょう
例:
1<div>
2 <label className="peer-checked:bg-green-300" htmlFor="bad-example">
3 だめな例
4 </label>
5 <input type="radio" className="hidden peer" id="bad-example" name="example" />
6</div>
7<div>
8 <input
9 type="radio"
10 className="hidden peer"
11 id="good-example"
12 name="example"
13 />
14 <label className="peer-checked:bg-green-300" htmlFor="good-example">
15 良い例
16 </label>
17</div>理由
tailwindcssのpeer-〇〇は.peer:〇〇 ~ .peer-〇〇\:〇〇 {}という形式となっている。また、cssの~(チルダ)はその要素以降の兄弟要素を指す。そのためpeerのほうが先にないと指定されない様になる