Tailwind CSS で :not()を指定！サポートされていないセレクタの対応

否定擬似要素 :not()を使用して、最初以外という指示を Tailwind CSS で指定しようと思った時にあまり記事がなかったので残すことにします。

現在、Tailwind CSS では:not()に対応するセレクタはサポートされていません。
class="not:first:mt-4"で指定できるのかなと思いましたが、これは適応されませんでした。
なので、別の対応策が必要です。

セレクタをCSSで指定

セレクタをcssで指定する場合は以下のように対応できます。

li:not(:first-child) {
 @apply mt-4;
}

notを使用せずに指定

通常は余白をつけ、最初のみ指定を無かったことにすることで、想定通りに指示できます。
ただこの方法だと、スタイルの指定を重複して掛けてしまうことになります。

<ul>
{items.map((item, index) => (
 <li key={index} className="mt-4 first:mt-0">アイテム</li>
</ul>

カスタムセレクタで指定

セレクター自体を角カッコで囲んで、css記法で指定してあげると適応されます。
class属性で直接指定したい場合は、これが一番分かりやすく良いような気もします。

<ul>
{items.map((item, index) => (
 <li key={index} className="[&:not(:first-child)]:mt-4">アイテム</li>
</ul>

結論

プロジェクトの要件や規模感に合わせて、ルールを作り適切な指定方法をするのが良いと思います。
とりあえずスムーズに実装したい場合は、カスタムセレクタで指定するのが良いかなと思います。