Tailwind CSSについて
前提
Tailwind CSSに代表される
- プレゼンテーションクラスによるユーティリティファースト
- マルチクラス前提
なCSSフレームワークは採用する前に注意が必要です。
規律なく使用するとマークアップ側に汚染が広がり、運用効率に影響します。
以下の条件を満たした場合に使用を検討してください。
- コンポーネントベースでソース管理がなされている
- eslint-plugin-tailwindcssなどを用いてマークアップ内のクラス名順序に規律がもたらされている（レビュー時またはコミット時のリントにCI（継続的インテグレーション）として組み込まれている）
- クライアントも含めた「制作チーム」としてカウントされうるメンバーの半分以上がtailwindcss.configの仕様を理解しコンパクトに設定ファイル内を保つことが出来る
- デザインデータまたはデザインシステムで数値やカラーコードの指定が徹底されている
使う上での注意点
- arbitrary values（
text-[32px]）の使用は限定的にする（原則使わない） - デザインデータまたはデザインシステムで指定されている数値やカラーコードのみを設定ファイルに記載する
- spacingなどの数値は
xs ~ base ~ xxlやフィボナッチ数列などのスケーリングで管理する- デザインツール（Figmaなど）のトークンと一貫性を保つ
- テーマやトークンが追加されたらメンバーに共有する
- 使用するクラスに揺れが出始めたら優先度を高めたリファクタリングissueをたてる
- Tailwind CSSは銀の弾丸にはならないばかりか、毒になる可能性を重々承知する