「「Tailwind CSS実践入門」出版記念イベント」に参加してきました

出版記念基調講演

TailwindCSSとの出会い

  • https://charcoal-web.pixiv.design/
  • デザインシステムの技術選定
    • プロダクトたくさん
    • 全部Reactというわけではない
    • ->Tailwindがちょうどよかった
  • もともとCSS in JSとかよりCSS Modulesが好きだった

CSSのレビューをしやすくする

  • write-onlyな言語になりがち
    • コードレビューがちゃんとされづらい
  • CSS+StylelintとTailwindCSSでの対比
  • Tailwindの方がレビューしやすい
    • 上書きされてるかもと考えなくていい
    • ArbitaryValuesがあったら警戒
    • モディファイアが少なかったら警戒
    • 機会にわかりやすいコードは人間もレビューしやすい

書籍の執筆

  • WebDBPressでtailwindの特集書いた人から紹介されて書くことになった
  • CSS初心者はターゲットにできない
    • デザインシステムでの活用を期待されているので
  • デザイナやマークアップやサーバサイドの人も読んでほしい
  • ユーティリティファースト vs セマンティックCSS
    • 対立があると議論が見やすくなる
  • 差分ではなくストーリーを書く
    • ブログなら前回からのアップデートで書けるけど本だとそうはいかない
  • フレームワークの入門書は歴史と思想を扱う

大変だったこと

  • 周辺技術全部使ったことあるわけじゃなかった
    • どれが必須でどれが好みの問題かはある程度見えていたしレビューもしてもらった
  • CSS設計の話は古いものもあってBEM以外詳しくなかった
  • tailwindのclassを紹介していく4章を書くのが大変だった
    • 5~10万文字かと見積もったら14万文字になった

文章を書く工夫

  • かっこいいルビを入れる
    • 着脱可能(プラガブル)
    • 修飾子(モディファイア)
    • 日本語と外来語の紐づけを簡単に示せる
  • 傍点を活用
    • 日本語にイタリックがないし太字多様も嫌だった

CharcoalとTailwindCSS

  • mimoさん

Charcoal

Iconify for TailwindCSSのすすめ

Iconify

引数のあるmixinのような仕組みをプラグインとして実装する

  • _yuheiyさん

CSSのmxin

  • matchUtilitiesを使うと引数のあるユーティリティを作れる
    • matchConponentsもある
    • 引数は1つしかとれない
  • tailwindの内部の書き方を真似ると参考になる
  • custom variablesを使うと1つのclassで複数指定するものを個別に指定できる