Tailwind CSSを 本気でカスタマイズする方法 BARフロントえんどう #2 「CSS Library / Framework」@サイボウズ pixiv Inc. Chiaki KUDO / @f_subal 2024.04.19

2 自己紹介 ● 2016年4月 ピクシブ株式会社に新卒入社 ● 2018年から pixivFACTORY の開発 ● フロントエンドエンジニア → テックリード → エンジニアリングマネージャ → PdM ● 2020年〜2022年デザインシステムの開発を兼任 ○ 2022年に charcoal として OSS 化 ○ デザインシステムの初期メンバーで、OSS 化 プロジェクトをやった人 ● 2024年に『Tailwind CSS実践入門（#風車本）』 を出版 @f_subal ピクシブ株式会社

3

4

https://charcoal-web.pixiv.design 5

話すこと ● Tailwind CSS は積極的にカスタマイズする前提で使おうという話 ○ 「デフォルトテーマが足りないからしょうがなく」ではない！！ ○ デザインシステムを作るフレームワークとして使おう ● デザインシステムを作るために theme.extend 以外にできることの話 ○ プラグインを書く、preset を配る、JavaScript APIを使うなど ○ いろいろできることはある ● 将来の Tailwind CSS のカスタマイズはどうなるかの話 ○ Oxide の話と、v4.0 で予告された config がどうなりそうか 6

みなさん tailwind.config.js を カスタマイズしてますか？ 7

どのようにTailwindをカスタマイズしてるか ● @charcoal-ui/tailwind-config は社内共通の tailwind.config.js を配布している ● これを作るにあたって、Tailwind CSS の以下の機能を使っている ○ theme / theme.extend ○ plugins ○ corePlugins ○ presets ○ JavaScript API などなど… ● これらをそれぞれどのように使っているかを説明します 8

9 ● デザイナがFigmaで定義したトークン を一通りthemeに記述する ● そうすると色、スペーシング、角丸 などのクラスが全部できる ● Figma に出てくる色名を適当にタイ ピングすると補完でクラスが出る状 況になる！！！ みなさんご存知 config.theme

10 1.デザイナーが 　Figmaで色名を指定してるのを見る 2. 「VSCodeでsurface3って打ったら その通りのクラスあったわ！！」 超簡単！！！！！！！！

11 ● デザインシステムのルールが Tailwind の corePlugin の粒度と一致 しないことがある ● こういうものはプラグインで書く ● ピクシブの場合は leading-trim っ ぽい挙動を伴う typography クラス がそう ● Tailwind 標準の text-〇〇 に加えて 特殊な挙動がある pluginを書く (1)

12 ● base, components, utilities の層に 好きなクラスをJSで追加するしくみ ● Tailwind にないユーティリティを追 加する or ユーティリティと併用する 前提のクラスを作る ● charcoal だと utilities として実装し たがこれは addComponents でも良 かったような気はしている… Tailwindにおける プラグイン

13 ● charcoal のダークモードは Tailwind CSS のデフォルトのダークモードと 異なる ● dark: を使わず、CSS Variables を 使って表現している ● これもプラグインで表現すると良い ● この場合は addBase で表現する（詳 しくは風車本第7章！） pluginを書く (2)

何をプラグインにするかの考え方 ● CSSにない機能を定義するような気持ちで書く（あくまで気持ち） ○ React のコンポーネントよりも、Sass の mixin とかを書くときの気持ちが近い ○ 「ボタン（.btn）」とかよりは「いい感じの文字配置(14px)」みたいな粒度が あってることが多い ■ 「引数を持ったスタイルの抽象」をクラスで表現する感じ ■ addComponents() という名前にだまされるな 14

15 ● charcoal では基本的に text-〇〇 よ り前述の typography-〇〇 を推奨し ている ● ということは、line-height を単体で 変更することがあまり推奨されない ● ので lineHeight のクラスを切ってリ リースしたが… ● 正直これはやらなくても良かったな と思っている（ごめん） corePluginsを切る

16 ● tailwind.config.js を npm パッケー ジとして配った時に利用側で使える 機能 ● v1.9 以前はなかった（昔は lodash.merge とかで設定ファイルを マージしてた…） ● content など、利用側に固有の設定 を除いて deep merge してくれる presetsとして設定 を配る

17 ● charcoal では tailwind.config.js の スナップショットテストを書いてい る ● これは jest 内で PostCSS をビルド すると良い ● クラス一覧を返す API とかは特にな いので 設定ファイルのテス トを書く

18

19 ● Tailwind CSS 公式も Jest の中で PostCSS をビルドしている ● クラス一覧じゃなくて CSS の中身も 見てる ● こういうときは content の raw プ ロパティが非常に便利 ● 「もしこういう html だったら…」を テストするのに使える Tailwind公式はどう テストしてるか

これからのTailwind CSSの カスタマイズ 20

21 ● config を JS でなく CSS で書ける機 能が作られようとしている ● これを前提に、もともと tailwind.config.js にあった機能を再 実装している ● これを前提した時に presets の概念 がどうなるかはまだよくわからない ● デザイントークンをJSの定数で持っ てるのでどうすべきか様子見 v4.0で起こること x.com/adamwathan/status/1770979061721919598

まとめ ● Tailwind CSS は積極的にカスタマイズする前提で使おうという話 ○ 「デフォルトテーマが足りないからしょうがなく」ではない！！ ● デザインシステムを作るために theme.extend 以外にできることの話 ○ プラグインを書く、preset を配る、JavaScript APIを使う ● 将来の Tailwind CSS のカスタマイズはどうなるかの話 ○ Oxide の話と、v4.0 で予告された config がどうなりそうか 22

Any Questions? 23