コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

『「Tailwind CSS実践入門」出版記念イベント』に行ってきたよメモ

行ってきたメモ

『「Tailwind CSS実践入門」出版記念イベント - connpass』に参加してきたのでそのメモです、

各発表の感想

※資料スライドは見つけたら貼ります。

基調講演

感想

  • CSSを普段遣い死ている人がなぜtailwindを選択したかという話には納得感があった。チームでどう使えるかの大事さ。
  • CSSのコードレビューの真剣さというのもそのとおりだなという気になってしまったので、もっと本質的なレビューをしたいというときにはたしかに良いのかもという気持ちに。
  • ユーティリティファーストの話もそうだが、書籍として歴史の部分に重きをおいているのを改めてしれてよかった。

関連リンク

CharcoalとTailwind

スライドは見つけたら貼ります

感想

  • pixivで開発しているOSSデザインシステムCharcoalとtailwindの話。
  • @charcoal-ui/tailwind-config でtailwindの細かな設定を利用でき、@charcoal-ui/react を使うとpixivっぽいUIも再現できる
  • 基調講演の話でもReactではない環境でも使えるデザインシステムを…という話だったので実例として見ることできてよかった。

関連リンク

Iconify for Tailwind CSSのすすめ

感想

  • すべてのIconファイルを使うためのIconifyのtailwind用のプラグインの話
  • tailwindに限らずこのような仕組みがあることを知らなかったので学びが多かった
  • ライブラリが複数ある場合の勘所みたいなのは難しいな…と思いながら聞いてました。

関連リンク

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

感想

  • mixinみたいなところをtailwindで実現するための話
  • tailwind側の実装実例を交えながら記述の説明をされていた

関連リンク

トークセッション

著者の @f_subal さんと @harukasan の対談

内容メモ

書籍ではtailwindCSSの思想の話が多かったが、ここがよかったなという話があれば

デザインシステムを作るうえでテーマの制約ができること、たとえばスペーシングを使うのがカスタマイズできるしそれをpureCSSに近い技術でできるところ。 2020年当時だとそれが一番できるのはCSS in JSが主流だったが、それに近いメリットが得られるのが大きかった 利用としているところが全てがReactとは限らない、たとえばRailsのテンプレートエンジンなどもあるので、Reactでしかつかえないデザインシステムは避けたい、というところでもよかった。

実践入門といいながら、入門者を対応していない書籍のように思えるがなんでこういう書き方になったか？

著者観点としては具体特定のユースケースをなぞる形式の本よりも、原則などを教えてくれる本のほうが、自分だったらどうするかの置き換えコストが低いから。 本としてもそれは意識されており、実践的にな部分は後半の8章、9章。 また特定のユースケースだとCSSフレームワーク部分以外（ReactなどのJS）の選択に迷うのでそういう部分もあってこの書き方になった。

6章のコンポーネントの話について

tailwindはコンポーネントを作るときには苦手な部分がある。 tailwindはtailwind.configにあるクラスしかつかえないので、依存せずポータブルなものをつくるときにはCSS in JSのほうがよい。

pixiv社ではどう使っているか？

複数のプロダクトで利用している、プロダクトごとのprimary colorは異なるが、ほかはだいたい同じなのでブランドカラーのサポートなども難しい話ではない。

実際に使っていることについての話

「ここはなんでAribitaryValueなんですか？」みたいなやり取りが増えた。また9章で取り扱っている話は実態件を元にした話が多い。 また、デザイナーがあんまり協力的ではない状態で採用してもデザインシステムの構築は難しいと考えているので、一緒に考えられる人がいるときに使うと良いと思っている。

バックエンドエンジニアも読んでほしい部分に関しては、昔だったらCSS in JSなどしか受けられない恩恵がtailwindでも受けられる テーマに準拠する、動的にスタイル分岐をさせるなどは良いポイント。

Bootstrapの二の舞いにならないために

addComponentsを使ってcardのようなものを準備するとBootstrapのようになってしまう。 どちらかというと書籍「Every Layout」にあるようなデザインパターンをaddUtilitiesで使うようにした方が良い。

感想

  • 書籍の内容を掘り下げつつ、tailwindの苦手な部分の話などが聞けた。
  • なかでもCSS in JSとの対比はいくつかあったので、tailwindの得手不得手みたいなところは学びがあった。

関連リンク

全体を通しての感想

  • 書籍がとてもよかったので話を聞きに行ったが、pixivでの利用事例などが聞けてよかった。
  • 基調講演のスライドにもあったが、考え方の本ではあったのでクロストークでその根源が聞けてよかった
  • バックエンドを普段やっている身としてはスタイリング技術選定の助けになる部分が多かった
  • 時間の関係でトークセッション後には会場を後にしたが、もっと話についていける知識を身に付けられればな…と感じさせられる場だった

関連リンク

実況の中で以下のやり取りが非常にためになったのでメモ

Every Layout

Every Layout

Amazon

Tailwind CSS実践入門 エンジニア選書

Tailwind CSS実践入門 エンジニア選書

Amazon