TailwindCSSでUIライブラリを作る際のハマりどころ

TailwindCSSで UIライブラリを作る際のハマりどころ 2024/05/10 did0es

自己紹介 did0es(Hirai Shuta) SWE @ CyberAgent, Inc. Main organizer @
Meguro.es X: https://x.com/did0es GH: https://github.com/shuta13

目次 1. 背景 2. ハマりどころ 3. まとめ

背景

Webフロントエンドエンジニアが少ない (様々な登壇で言及している話なので耳タコかもですが) 自身の所属している組織はインフラチームです・フロントエンドエンジニアが2人しかいない・主にインフラの管理画面を開発する　・AWSやGCPのコンソールを思い浮かべてください・2人で進捗を最大化する必要がある

Web SDK化計画開発に必要なものを全てSDKにして配ってしまおう・必要なSDKをインストールして組み合わせるだけでWebサービスができる・DIY原則 SDK化しているもの・UI ・ロジック(React Hooksや共通処理) ・OAS
・Dependencies などなど...

UIの共通化従来は外部のUIライブラリを使用していた・MUI v5とNextUI v1を使っていた・アプデがつらすぎる　・特に NextUI v1 は
alpha 版だった　・UI ライブラリで alpha 版... 上記のライブラリと互換性のあるUIライブラリを作る・全てのプロジェクトで React を使っているので React 製・CSS をゴリゴリ書いても良かったが... 　・プロダクト全体で使う TailwindCSS を流用

UIの紹介

ハマりどころ

Preﬂightの衝突 TailwindCSSにはPreﬂightという初期化・正規化機能がある・modern-normalize を包含したもの TailwindCSSをコンパイルすると1つのCSSファイルになる・これを使う側で読み込むとStyleが反映されるクライアントサイドでこのCSSファイルと TailwindCSS を読み込むと衝突・初期化・正規化が2回走り、CSSファイルの内容を上書きする
・詳細度バトルに敗北すると上書きされる

Preflightの衝突の解決方法使う側で Preflight を無効にする https://tailwindcss.com/docs/preflight#disabling-preflight

classNameの衝突こちらも TailwindCSS と UI ライブラリを併せて使うときに発生・TailwindCSS を入れた側で theme を
extend できなくなる・正確には UI ライブラリ側にある className しか使えなくなる UI ライブラリを使う側では TailwindCSS のドキュメントから逸脱したことをやりたくない・ユーザーはあまりフロントエンドに詳しくない場合もある・独自 className しか使えない状況は避けたい

classNameの衝突の解決方法 UIライブラリ側で preﬁx を片っ端からつけていく・手動でやるとぶっ倒れるかもしれないので自動化・codemodを書いた(CSSの話から逸れるので省略)

まとめ

TailwindCSSを使う前に以下を確認しましょう・本当に TailwindCSS が必要ですか？　・CSS 構文のブラウザサポートを見てみましょう・className preﬁx は設定しましたか？
・Preﬂight が重複していませんか？　・重複しても大丈夫なCSSを書く or 自前の normalize にするそもそも... ・本当にUIライブラリを自作する必要がありますか？　・TailwindCSS ベースが良いなら daisyUI などを検討しましょう　・すいません...

ご清聴ありがとうございました！ご質問などあれば懇親会でお願いします

TailwindCSSでUIライブラリを作る際のハマりどころ

TailwindCSSでUIライブラリを作る際のハマりどころ

did0es

More Decks by did0es

Other Decks in Technology

Featured

Transcript