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, }) ); 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', }, }, }); Primary Button 13

レスポンシブはFluid for Tailwind CSSを使うと、流動的な値にできる // before

Test Message

// after

Test Message

14

1. デザイントークンを意識して実装しよう 2. コンポーネントとクラスの設計に気をつけよう ご清聴ありがとうございました 15