こんにちは森田です。 今回は Tailwind CSS v3.1 で実装された子孫セレクタを指定できる新機能 「arbitrary variants」 の紹介します。 arbitrary variantsarbitrary variants はセレクター修飾子を class に直接記述し親セレクタから子または子孫セレクタを指定する機能です。 Handling Hover, Focus, and Other States – Using arbitrary variants Tailwind CSS v3 より下記のコードのような任意の値を指定できる arbitrary value という機能はありました。
![Tailwind CSS で子孫セレクタなどを指定できる arbitrary variants](https://cdn-ak-scissors.b.st-hatena.com/image/square/089b9b70a545ee4bc571e113552886024afbc079/height=288;version=1;width=512/https%3A%2F%2Fwp.gaji.jp%2Fwp-content%2Fuploads%2F2021%2F12%2F3bdc06d6c765df4a5620dd5de0477ba6-e1639115280968.png)