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
710
Next.js+yjs+BlockNoteでNotionライクな最高の共同編集エディタを作ろう
imaimai17468
0
2.1k
BlockNoteを布教するぜ
imaimai17468
0
26
Marp + Cursorによるスライド生成
imaimai17468
0
64
Next.jsにおけるLazy Loading
imaimai17468
0
190
Featured
See All Featured
Clear Off the Table
cherdarchuk
91
320k
A Philosophy of Restraint
colly
202
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Infographics Made Easy
chrislema
239
18k
How to Think Like a Performance Engineer
csswizardry
16
960
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
Building Applications with DynamoDB
mza
90
6k
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