Tailwind CSSでcounter-incrementでカウントして出力する方法

CSSにはcounter-incrementという便利なプロパティがあります。
該当要素のカウントでカウントを行ってくれるもので、 content: counter() を使うことでカウントした数字を出力してくれます。

参考： CSSカウンターの使用

これをTailwind CSSで出力するにはどうすればいいか迷ってしまいました。
Web上では直接的な解決策が書かれていませんでしたので、日本語で情報を残しておきます。

解決はシンプル

ul.hoge li {
  counter-increment: count 1;
  @apply before:content-[counter(count)];
}

これで ul.hoge 毎に含まれる li の数をカウントしてくれて、 :before 疑似要素として数字を出力してくれます。生のCSSである counter-increment: count 1; を書いて、 @apply で疑似要素にcontentの値を自由に指定するだけでした。

※ count は変数的な感覚で自分の好きな文字列を使ってOKです。 1 は初期値＆増加数です。書かなくても1からカウントしてくれますが、明示的にしておいた方が安心感あるかなということでこの書き方にしています。

捻りも何もない解決策ですが、HTML上だけでは実現できず、CSSファイルに記述して apply を絡ませる必要があり、やや力技感ある方法での解決でした。

これでTailwind CSSでもリスト項目が増減しても、自動的に増減してくれる数字に自由な装飾ができるようになりました🎉