Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TailwindCSSでUIライブラリを作る際のハマりどころ
Search
did0es
May 10, 2024
Technology
0
600
TailwindCSSでUIライブラリを作る際のハマりどころ
Meguro.css #10 で発表した資料です
did0es
May 10, 2024
Tweet
Share
More Decks by did0es
See All by did0es
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
2.3k
5分でわかるPreactのVDOMで作るWebエディタ
shuta13
0
150
codemodとうまく付き合うには
shuta13
0
1.5k
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
shuta13
4
910
CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏
shuta13
0
220
Turborepo Code Generationによる、サイバーエージェントグループのフロントエンド開発の効率化
shuta13
4
2.5k
CADC 2023 LPにおけるライブ配信の裏側 | Momento Meetup #3
shuta13
0
130
Technologies for developing editors / Webエディタ開発を支える技術
shuta13
1
770
天下一 静的サイトホスティング 武道会 / World Static Site Hosting Tournament
shuta13
0
350
Other Decks in Technology
See All in Technology
バクラクの認証基盤の成長と現在地 / bakuraku-authn-platform
convto
1
620
Automatically generating types by running tests
sinsoku
2
3.4k
Running JavaScript within Ruby
hmsk
3
340
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
14
4.9k
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
11
3.2k
DETR手法の変遷と最新動向(CVPR2025)
tenten0727
2
1.4k
The Tale of Leo: Brave Lion and Curious Little Bug
canalun
1
130
watsonx.data上のベクトル・データベース Milvusを見てみよう/20250418-milvus-dojo
mayumihirano
0
120
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
3
1.9k
より良い開発者体験を実現するために~開発初心者が感じた生成AIの可能性~
masakiokuda
0
200
AWSLambdaMCPServerを使ってツールとMCPサーバを分離する
tkikuchi
1
3k
Amazon CloudWatch を使って NW 監視を行うには
o11yfes2023
0
170
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Become a Pro
speakerdeck
PRO
27
5.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Producing Creativity
orderedlist
PRO
344
40k
How GitHub (no longer) Works
holman
314
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
Transcript
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 などなど...
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の紹介
ハマりどころ
Preflightの衝突 TailwindCSSにはPreflightという初期化・正規化機能がある ・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ライブラリ側で prefix を片っ端からつけていく ・手動でやるとぶっ倒れるかもしれないので自動化 ・codemodを書いた(CSSの話から逸れるので省略)
まとめ
TailwindCSSを使う前に 以下を確認しましょう ・本当に TailwindCSS が必要ですか? ・CSS 構文のブラウザサポートを見てみましょう ・className prefix は設定しましたか?
・Preflight が重複していませんか? ・重複しても大丈夫なCSSを書く or 自前の normalize にする そもそも... ・本当にUIライブラリを自作する必要がありますか? ・TailwindCSS ベースが良いなら daisyUI などを検討しましょう ・すいません...
ご清聴 ありがとうございました! ご質問などあれば懇親会でお願いします