を拝読し、自分だったらこのCSSフレームワークをどう扱うかについてのメモです。
結論
- クラス名でのスタイル指定はしない
- Tailwindcss の apply ディレクティブ を用いる
Tailwind の特徴
- CSS が適切に高級化されており、記述の手間が軽減
- bootstrap や material-ui と比べると、テーマ層がずっと薄いため、汎用的なレイアウトに使える
Tailwindcss の選定
CSS in JS
- Util な関数を作りたくなるが、自由度が高すぎて（特にデザイナーにとっては）保守性が下がりやすい
- 動的なスタイルを作る場合、devtool 等によるデバッグがしづらくなる
クラス名にまつわるあれこれ
クラス名にスタイルを書く方法
- HTMLの可読性が下がる（役割が分かりづらい、検索しづらい）
- render 結果にクラス名フックがないと e2e テストとかデバッグはやりづらそう
-
@applyディレクティブを使うのが良さそう
scoped・CSS 単体ファイル
- BEM は命名のコストが高いので、CSS Modules などの scoped なクラス名を導入
- Next.js・Vue ではそんなにトラブル無く scoped が導入できた記憶
- そこそこ複雑なスタイルだと CSS は別ファイルのほうが楽（デザイナーも触る場合は特に）
DSL
- Tailwind には便利な DSL があるが、規模が大きいといろんな記法が混在しそう
- ある程度チーム合意をとって使う機能を吟味・限定したほうが良さそう
その他メモ
@apply は意味のまとまりごとに改行したほうが良さそう
@apply text-base font-medium rounded-lg p-3 bg-rose-500 text-white;
よりは
@apply text-base font-medium;
@apply bg-rose-500 text-white;
@apply rounded-lg p-3;
ぐらいのまとまりで書いておいたほうが、見やすく後々編集も楽なのではないか
職種間の寄り添い
インターフェースとなりうる箇所
を双方理解し、これを用いてデザインし、カンプに反映しやり取り出来ると連携しやすさ抜群
誤解
- 最初に書いたように、テーマ層が他の UI フレームワークに比べてずっと薄いので、Tailwindcss トップページをみて、良いテイストだなと思って採用すると、あれを実現するまでには結構遠い道のりになる
- Material-ui = Bootstrap >> Bruma >>> Tailwindcss ぐらいのテーマ性の無さ、CSS の高級 DSL の側面が強そうなので、UI フレームワークという認識じゃないほうがいいんじゃないか感