- 2024/3/12
- https://pixiv.connpass.com/event/310073/
出版記念基調講演
TailwindCSSとの出会い
- https://charcoal-web.pixiv.design/
- デザインシステムの技術選定
- プロダクトたくさん
- 全部Reactというわけではない
- ->Tailwindがちょうどよかった
- もともとCSS in JSとかよりCSS Modulesが好きだった
CSSのレビューをしやすくする
- write-onlyな言語になりがち
- コードレビューがちゃんとされづらい
- CSS+StylelintとTailwindCSSでの対比
- Tailwindの方がレビューしやすい
- 上書きされてるかもと考えなくていい
- ArbitaryValuesがあったら警戒
- モディファイアが少なかったら警戒
- 機会にわかりやすいコードは人間もレビューしやすい
書籍の執筆
- WebDBPressでtailwindの特集書いた人から紹介されて書くことになった
- CSS初心者はターゲットにできない
- デザインシステムでの活用を期待されているので
- デザイナやマークアップやサーバサイドの人も読んでほしい
- Reactの説明もあるが疎結合に
- ユーティリティファースト vs セマンティックCSS
- 対立があると議論が見やすくなる
- 差分ではなくストーリーを書く
- ブログなら前回からのアップデートで書けるけど本だとそうはいかない
- フレームワークの入門書は歴史と思想を扱う
大変だったこと
- 周辺技術全部使ったことあるわけじゃなかった
- どれが必須でどれが好みの問題かはある程度見えていたしレビューもしてもらった
- CSS設計の話は古いものもあってBEM以外詳しくなかった
- tailwindのclassを紹介していく4章を書くのが大変だった
- 5~10万文字かと見積もったら14万文字になった
文章を書く工夫
- かっこいいルビを入れる
- 着脱可能(プラガブル)
- 修飾子(モディファイア)
- 日本語と外来語の紐づけを簡単に示せる
- 傍点を活用
- 日本語にイタリックがないし太字多様も嫌だった
CharcoalとTailwindCSS
- mimoさん
Charcoal
- https://charcoal-web.pixiv.design/
- pixivのデザインシステム
- web/ios/android
- react/styled/tailwind
Iconify for TailwindCSSのすすめ
- lacolacoさん
- https://scrapbox.io/lacolaco/Iconify_for_Tailwind_CSS%E3%81%AE%E3%81%99%E3%81%99%E3%82%81
Iconify
- https://iconify.design/
- https://icon-sets.iconify.design/
- OSSのアイコンライブラリを横断して使えるライブラリ
- 特定のライブラリ使うと足りないアイコンが出た時に困る
- tailwindでも使える
- Tailwindのユーティリティクラスでアイコンを表示できる
- https://iconify.design/docs/usage/css/tailwind/
- https://github.com/egoist/tailwindcss-icons
- textっぽくつかえるけど実態はsvg
引数のあるmixinのような仕組みをプラグインとして実装する
- _yuheiyさん
CSSのmxin
- matchUtilitiesを使うと引数のあるユーティリティを作れる
- matchConponentsもある
- 引数は1つしかとれない
- tailwindの内部の書き方を真似ると参考になる
- custom variablesを使うと1つのclassで複数指定するものを個別に指定できる
