UnoCSSはTailwindのようなユーティリティclassを自作できるツールです。
完全自作も可能ですしプリセットも豊富でTailwindと同じstyleを出力してくれるセットなどもあります。
Tailwindのclassを補完しつつ独自のユーティリティclassも作れるなら移行も楽だし便利じゃん！と思ったのですが…
そこでふと、そもそも自分で独自のユーティリティclassを作るなら以前.scssに自作のclassを書いてた頃と何が違うんだ…？と思ってしまい結局本格的な導入はお見送りしました。
自分にとってのベストなユーティリティclass運用はまだ検討中です。
※2024年9月追記③
Tailwindよりも高速に動作するということで、自分なりにある程度しっかり検証しました。試したことは一通り以下の記事にまとめています。
※2024年8月末追記①
Tailwindより高速ということで、どのような感じなのかある程度触ってみました。
Vite用のプラグインはMasterCSSと同様に、vite-plugin-handlebarsでHTMLをコンポーネント化し、外部ファイル化してインポートしているグループに対してMasterCSSのstyleが出力されないという個人的には致命的な問題がありましたが、UnoCSSにはPostCSS版があったので上記問題はクリアできました。
しかし細かく見ていくとホバーclassのメディアクエリ設定など、Tailwindとの互換性面ではやや問題ありといった感想でした。
通常のhover設定は:hoverではなく、@hoverと書くと「@media (hover: hover) and (pointer: fine) {}」の中に出力ができましたが、group-hoverなど少々凝った設定の場合はこのメディアクエリ設定を入れる方法が用意されていないようでした。
動作速度的にはTaiwindよりもかなり高速、かつカスタムに正規表現が使えるため非常に拡張はしやすい印象を持ちましたが、複雑なホバー設定においてgrup-系の記述はよく利用するので個人的な導入は一旦保留としました。
Tailwindの記述に囚われず完全新規で導入する場合にはとても良いツールだなと思いますので、これから新規参入される方々には非常にオススメできるツールだと思います。
※2024年8月末追記②
hoverのメディアクエリ問題はPostCSSのプラグイン postcss-media-hover-any-hover などを導入し、build時に後付けで追加する方法を取れば解決できそうです。
ただし公式ドキュメント「Differences from Tailwind CSS」を参照すると、若干差異はあるようなので、他にも細かい点で必要に応じてカスタマイズが必要になってくるかもしれません。
今のところ他に大きな問題は見つけられていないため、どこかのタイミングで一度利用してみようと思います！