TailwindCSSで学ぶ技術批判の気をつけ方

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

TailwindCSSで学ぶ技術批判の気をつけ方

TailwindCSSで学ぶ技術批判の気をつけ方

imaimai17468

More Decks by imaimai17468

Featured

Transcript