Tailwindcssに寄せたメモ

3567 ワード
cssフレームワーク tailwindcss フロントエンド フロントエンド テキストリンク

を拝読し、自分だったらこのCSSフレームワークをどう扱うかについてのメモです。

結論

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 フレームワークという認識じゃないほうがいいんじゃないか感

参考