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

• 2024/3/12
• https://pixiv.connpass.com/event/310073/

出版記念基調講演

• 工藤智祥さん
• https://speakerdeck.com/fsubal/tailwind-cssshi-jian-ru-men-chu-ban-ji-nian-ji-diao-jiang-yan

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で複数指定するものを個別に指定できる