個人のプロジェクトで採用できそうな機運があったので、ためしにNext.jsのサンプルページをtailwindに書き換えるのをやってみた。
絶対値指定を避けているので若干差分は出たけど、それなりの再現が叶えられたのと、書き味も悪くなくていい感じ。最低限のデザインシステム（ルールもしくはレール）に乗っかれている感覚がある。
感想
- 間違っても「css知らなくても書ける」なんてことはない
- 慣れるまでは、一回付加したいcssを列挙→クラス名に変換→適用というステップが必要
- チートシートに首っ引き必至だけど、頻出cssは大抵の場合そんなに多くないし、すぐ慣れそう
- これまでclassに付加していた「意味のまとまり」が消えるので、CSS Moduleで表現していた領域・責務がコンポーネント側に寄るような印象を受けた
- 「しっかりコンポーネント分割してtsxの可読性を保とう」という意識がはたらきやすい
- applyを積極的に使っていくよりはコンポーネントを分割するほうが本質的な気がした
- 一方で、集団で開発するときはきちんと足並みを揃えられるかが導入可否のポイントになりそう
- tsx（html）を書く人がcssも書けるとは限らない…という状況もありそう
- 薄いし共存・カスタマイズもできるので、既存のcssからページベースで移行するユースケースにも適用できそう
- 独自にルールを作り込む必要は少ないけど、特に最初は前述の責務の切り分けを念頭に置いてプロトタイプできるとよさそう
- 余談：vscodeのIntelliSence extensionべんり
before
before
after
after
diff
あえてコンポーネント分割などはしていないので、特にcardのところが冗長になっている
diff
