Tailwind CSSを本気でカスタマイズする方法

2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」（サイボウズ）での登壇資料です。

イベント → https://cybozu.connpass.com/event/311066/

Transcript

1. Tailwind CSSを 本気でカスタマイズする方法 BARフロントえんどう #2 「CSS Library / Framework」@サイボウズ pixiv Inc. Chiaki KUDO / @f_subal 2024.04.19
2. 2 自己紹介 • 2016年4月 ピクシブ株式会社に新卒入社 • 2018年から pixivFACTORY の開発 • フロントエンドエンジニア → テックリード → エンジニアリングマネージャ → PdM • 2020年〜2022年デザインシステムの開発を兼任 ◦ 2022年に charcoal として OSS 化 ◦ デザインシステムの初期メンバーで、OSS 化 プロジェクトをやった人 • 2024年に『Tailwind CSS実践入門（#風車本）』 を出版 @f_subal ピクシブ株式会社
5. https://charcoal-web.pixiv.design 5
6. 話すこと • Tailwind CSS は積極的にカスタマイズする前提で使おうという話 ◦ 「デフォルトテーマが足りないからしょうがなく」ではない！！ ◦ デザインシステムを作るフレームワークとして使おう • デザインシステムを作るために theme.extend 以外にできることの話 ◦ プラグインを書く、preset を配る、JavaScript APIを使うなど ◦ いろいろできることはある • 将来の Tailwind CSS のカスタマイズはどうなるかの話 ◦ Oxide の話と、v4.0 で予告された config がどうなりそうか 6
7. みなさん tailwind.config.js を カスタマイズしてますか？ 7
8. どのようにTailwindをカスタマイズしてるか • @charcoal-ui/tailwind-config は社内共通の tailwind.config.js を配布している • これを作るにあたって、Tailwind CSS の以下の機能を使っている ◦ theme / theme.extend ◦ plugins ◦ corePlugins ◦ presets ◦ JavaScript API などなど… • これらをそれぞれどのように使っているかを説明します 8
9. 9 • デザイナがFigmaで定義したトークン を一通りthemeに記述する • そうすると色、スペーシング、角丸 などのクラスが全部できる • Figma に出てくる色名を適当にタイ ピングすると補完でクラスが出る状 況になる！！！ みなさんご存知 config.theme
10. 10 1.デザイナーが 　Figmaで色名を指定してるのを見る 2. 「VSCodeでsurface3って打ったら その通りのクラスあったわ！！」 超簡単！！！！！！！！
11. 11 • デザインシステムのルールが Tailwind の corePlugin の粒度と一致 しないことがある • こういうものはプラグインで書く • ピクシブの場合は leading-trim っ ぽい挙動を伴う typography クラス がそう • Tailwind 標準の text-〇〇 に加えて 特殊な挙動がある pluginを書く (1)
12. 12 • base, components, utilities の層に 好きなクラスをJSで追加するしくみ • Tailwind にないユーティリティを追 加する or ユーティリティと併用する 前提のクラスを作る • charcoal だと utilities として実装し たがこれは addComponents でも良 かったような気はしている… Tailwindにおける プラグイン
13. 13 • charcoal のダークモードは Tailwind CSS のデフォルトのダークモードと 異なる • dark: を使わず、CSS Variables を 使って表現している • これもプラグインで表現すると良い • この場合は addBase で表現する（詳 しくは風車本第7章！） pluginを書く (2)
14. 何をプラグインにするかの考え方 • CSSにない機能を定義するような気持ちで書く（あくまで気持ち） ◦ React のコンポーネントよりも、Sass の mixin とかを書くときの気持ちが近い ◦ 「ボタン（.btn）」とかよりは「いい感じの文字配置(14px)」みたいな粒度が あってることが多い ▪ 「引数を持ったスタイルの抽象」をクラスで表現する感じ ▪ addComponents() という名前にだまされるな 14
15. 15 • charcoal では基本的に text-〇〇 よ り前述の typography-〇〇 を推奨し ている • ということは、line-height を単体で 変更することがあまり推奨されない • ので lineHeight のクラスを切ってリ リースしたが… • 正直これはやらなくても良かったな と思っている（ごめん） corePluginsを切る
16. 16 • tailwind.config.js を npm パッケー ジとして配った時に利用側で使える 機能 • v1.9 以前はなかった（昔は lodash.merge とかで設定ファイルを マージしてた…） • content など、利用側に固有の設定 を除いて deep merge してくれる presetsとして設定 を配る
17. 17 • charcoal では tailwind.config.js の スナップショットテストを書いてい る • これは jest 内で PostCSS をビルド すると良い • クラス一覧を返す API とかは特にな いので 設定ファイルのテス トを書く
19. 19 • Tailwind CSS 公式も Jest の中で PostCSS をビルドしている • クラス一覧じゃなくて CSS の中身も 見てる • こういうときは content の raw プ ロパティが非常に便利 • 「もしこういう html だったら…」を テストするのに使える Tailwind公式はどう テストしてるか
20. これからのTailwind CSSの カスタマイズ 20
21. 21 • config を JS でなく CSS で書ける機 能が作られようとしている • これを前提に、もともと tailwind.config.js にあった機能を再 実装している • これを前提した時に presets の概念 がどうなるかはまだよくわからない • デザイントークンをJSの定数で持っ てるのでどうすべきか様子見 v4.0で起こること x.com/adamwathan/status/1770979061721919598
22. まとめ • Tailwind CSS は積極的にカスタマイズする前提で使おうという話 ◦ 「デフォルトテーマが足りないからしょうがなく」ではない！！ • デザインシステムを作るために theme.extend 以外にできることの話 ◦ プラグインを書く、preset を配る、JavaScript APIを使う • 将来の Tailwind CSS のカスタマイズはどうなるかの話 ◦ Oxide の話と、v4.0 で予告された config がどうなりそうか 22
23. Any Questions? 23