ゲスト紹介

• ピクシブ株式会社 フロントエンドエンジニア
• Tailwind.css + classNames() を型安全に扱う TypeScript Language Service Plugin を書いた

Tailwind.cssとは

• https://tailwindcss.com/
• Utility-firstなCSSフレームワーク
• CSSのプロパティがそのままクラス名と紐付く設計
  • Atomic CSS: https://acss.io/
• 高いカスタマイズ性も特長

実務で感じたTailwindの特長

• pixivのデザインシステムを構築していく際の様々な問題
  • 最初はReact componentを横展開していく計画だったが、Reactを採用していないプロダクトへの導入が課題
  • 自前のCSSフレームワークを作るコストの高さ
• メタCSSフレームワークとしてのTailwind.cssの可能性

TypeScriptユーザーのためのirontail

• https://github.com/fsubal/irontail
• Tailwindが純粋なCSSフレームワークであるがゆえの問題
  • エディタの補完だけでは対処できないバージョンアップへの追従
• TypeScript language serviceを作る際の話
• classNamesとの組み合わせにより動作
  • https://github.com/JedWatson/classnames

Tailwindのメリット

• どんな既存のプロジェクトでも導入でき、どんなプロジェクトでも通用する可搬性
• JavaScriptとCSSの境界が明確
• Utility-firstでありながらも、クラスの組み合わせにより自然とデザイン規約に従うことができる設計

デザインシステムの例外とその対処

• デザインシステムを設計しても、例外的な要求はしばしば発生する
• Utility系のクラスを用意して上書きしていくこともできるが、あえてstyleを直接書いて可視化するのも手
  • 実装側からデザインシステムへのフィードバックを生み出す

これからのCSS設計

• Tailwindの登場によって、従来のCSSフレームワークともCSS-in-JSとも違うCSSの複雑化に対する解が生まれた
• CSSを設計・実装する上で、今後どのようなことが重要になる？
  • spring-raining: メディアクエリの多様化への対処
  • f_subal: CSS設計を通したエンジニアとデザイナーの意識の共通化
  • potato4d: フィールに対するCSSを超えた包括的な設計

Refs

• フロントエンドエンジニア / フロントエンド開発センター| 求人詳細 | LINE株式会社
  • https://linecorp.com/ja/career/position/475
• BGM: 騒音のない世界
  • https://noiselessworld.net/
• SE: 魔王魂
  • https://maoudamashii.jokersounds.com/