親要素にTailwind CSSのクラスを書いて、最初の子要素・最後の子要素のスタイルを指定する方法について説明します。

コード

<div className="[&>*:first-child]:text-red-500 [&>*:last-child]:text-blue-500">
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>

実行結果

あれ？Next.jsのコンポーネントではこのコードで問題ないのに、なぜかここでは反映されない…？すみません。調査します…。Next.jsのコンポーネントではこのコードでいけます！