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で学ぶ技術批判の気をつけ方
Search
imaimai17468
September 05, 2024
6
5.7k
TailwindCSSで学ぶ技術批判の気をつけ方
imaimai17468
September 05, 2024
Tweet
Share
More Decks by imaimai17468
See All by imaimai17468
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介!
imaimai17468
3
700
Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう
imaimai17468
0
2k
BlockNoteを布教するぜ
imaimai17468
0
26
Marp + Cursorによるスライド生成
imaimai17468
0
58
Next.jsにおけるLazy Loading
imaimai17468
0
190
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
28
1.4k
Designing for Performance
lara
604
68k
4 Signs Your Business is Dying
shpigford
179
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
How to Think Like a Performance Engineer
csswizardry
16
950
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Side Projects
sachag
451
42k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
27
8.9k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Transcript
TailwindCSSで学ぶ技術批判の気をつけ方 いまいまい 1
自己紹介 いまいまい (今井俊希) 株式会社ゆめみ 新卒 フロントエンドエンジニア 2
Xでの技術批判とその対策 なぜ生まれなぜ話題に尽きないのか 3
TailwindCSSに対する批判を皮肉った画像がある 1. 反Tailwindまたは反反tailwindのポストがされる 2. 反対意見同士で論争が起きる 3. 静まって他のトピックに対しての投稿が増える 4. スキルの問題でエンゲージメントが減少する 5.
エンゲージメント欲しさにまた批判をする 4
技術批判に乗っかってしまう原因 ※ガチでクリティカルな脆弱性などがあり、正しい批判が行われている場合は除く 根本はその技術に疎いこと TailwindCSSを食わず嫌いして「やっぱり」と思ってしまった場合 デザイン周りの設計がめちゃくちゃで苦手になってしまった場合 技術思考・マネジメント思考のどちらかに極端に偏ってしまっている場合 5
技術批判に乗らないためには その技術と関連領域について、良し悪し両方を言えるようにすること 個人での開発とチームでの開発の両方の視点を持っていること 知らない技術について強く語らないこと 6
TailwindCSSを実務で使うときに気をつけること 7
TailwindCSSの見づらさについて CSSの多重ネストと、横直線のユーティリティクラスの読みやすさは人による CSSは構造と対応づけられていて理解しやすい ユーティリティクラスの方が瞬間的にスタイルが理解しやすい 逆に、どちらも設計とその分割が甘ければ見づらくなる 根本原因 クラスの分割粒度やまとめ方が荒め 一つの要素にクラスを詰め込みすぎ 場合分けのクラスを一行にまとめている 8
デザイントークンを考えて実装できているか見直す 適当なユーティリティクラスを使ったり、 [ ] を使ってしまう デザインが統一されない・人によって記述方法が違う メンテナンス性が下がり、負債になってしまう CSSと同様に、デザイントークンの扱いは重要 9
デザイントークンとユーティリティクラスを同期させる カラートークン、スペーシングなどは使うものを統一する ユーティリティクラスの表記方法を統一する configに定義して運用する ユーティリティクラスにない場合は、configに独自のトークンとして定義する classNameに直書きしない 10
コンポーネント・classNameの設計を見直す コンポーネントの設計・分割 classNameにスタイルを書けても、責務の分割は重要 daisyUIやRadixUIなどに分割できないか shadcn/ui (RadixUI + TailwindCSS) 一箇所にまとめすぎているclassNameを部分的に分割でいないか 11
classNameの設計・分割 classNameの分割・結合にはtailwind-marge + clsxがおすすめ import { merge } from 'tailwind-merge';
import clsx from 'clsx'; const checkboxClass = merge( 'h-4 w-4', clsx({ 'bg-blue-500 border-blue-500': isChecked, 'bg-gray-500 border-gray-500': !isChecked, }) ); <input type="checkbox" className={checkboxClass} checked={isChecked} /> 12
variantsによって切り替えたいものはTailwind Variantsがおすすめ import { tv } from 'tailwind-variants'; const button
= tv({ base: 'px-4 py-2 font-semibold', variants: { color: { primary: 'bg-blue-500 text-white', secondary: 'bg-gray-500 text-black', }, }, }); <button className={button({ color: 'primary' })}>Primary Button</button> 13
レスポンシブはFluid for Tailwind CSSを使うと、流動的な値にできる // before <p className="text-lg md:text-xl lg:text-2xl">Test
Message</p> // after <p className="~text-lg/2xl">Test Message</p> 14
1. デザイントークンを意識して実装しよう 2. コンポーネントとクラスの設計に気をつけよう ご清聴ありがとうございました 15