tailwindcss

CSS in JSなアプローチではないので、以下のような特徴がある

全てが静的に決定する

単体ではCSSを動的に構築して値を動かすみたいなことはできない

tailwindの色指定をCSS変数でやるみたいなアプローチはあるが、少し冗長

効率的なデッドコード除去ができる

purgecssを使って使われていないクラスを除去することが前提になっている

CSS in JSのクリティカルCSSの抽出でも同じようなことはできるが、SSR毎にHTMLからクラス名を探して…みたいなアプローチが多く、計算量的に危うさがある

フレームワークを問わず使える

ReactでもVue.jsでもAngularでも、果てはペライチのHTMLでも同じように使える

クラス名にユーティリティを指定していく使い方が一般的だが、複雑になってきたらPostCSSの機能でtailwindをCSS Modulesと組み合わせることができる

このとき、CSSの詳細度には気を付ける必要がある

セレクタの利用を詳細度を上げないレベルに留める

あくまで「DOMがStyleを知る」状態を保ったほうがいい