tailwindのScreenは小さいほうが起点

tailwindcss のレスポンシブデザイン=設計方針を読み解く

以下の公式ドキュメントを参照します。 https://tailwindcss.com/docs/responsive-design

デフォルトで設定されているブレークポイントの一覧は以下

ブレークポイントのプレフィックス	最小幅	CSS
sm	640ピクセル	@media (min-width: 640px) { … }
md	768ピクセル	@media (min-width: 768px) { … }
lg	1024ピクセル	@media (min-width: 1024px) { … }
xl	1280ピクセル	@media (min-width: 1280px) { … }
2xl	1536ピクセル	@media (min-width: 1536px) { … }

CSSのメディクエリでmin-widthが設定されている通り、ブレークポイントは指定されたサイズを超えたら発動するように仕掛けられる。 これをモバイルファーストと呼んだりもするけど、レスポンシブを考えるときは小さいほうを起点として画面が広がっていくごとに要素をどうするか考える、というのがtailwindの設計思想である。

ドキュメントにもはっきりと書いてある。 https://tailwindcss.com/docs/responsive-design#working-mobile-first

Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the sm: prefixed version.

ここでも”小さい画面に対してsm:プレフィックスをつけないのが驚かれる”と書いてあるけど、レスポンシブデザインはモバイルファーストでやる、というのがtailwindの思想である。

個人的にも、これは賛成であります。

システム開発でレスポンシブデザインを要求されることもあるけどさ

業務システムの請負現場でレスポンシブデザインを求められることもよくありますけど、業務システムの開発はそもそもデスクトップファーストで設計されることが多いよね。 というか、もっというと”今の大変なお仕事をPCだけの簡単な作業にするなんて無理。やれるもんならやってみろ”ぐらいの態度が現場から出てくることも多くて、そしてそのやれるもんならやってみろ的な態度のユーザーに対して今の紙の書類やらエクセルやらをそっくりそのままWEBの画面に起こすのが精一杯なのですよ、実際。 そして案の定、使いづらい、と言われても。。。うん、それはそうだろう。。。

いやシステム屋が出てくる前に、そもそもその業務の手順とかルールを改善してPCとかモバイルを前提とした作業とかイメージしてみませんか？んで、やっぱりそれがいいって納得してからそこをシステム化しようよ、と。

なんか本社がシステム入れるっていうから現場は渋々、付き合ってあげます、みたいな空気、ちょいちょい感じるんスよねぇ。。。

そしてそんな設計のシステムに対して、後乗せで“スマホでも画面見たい”とか”タブレットからチェックしたらプリンタに出せないの？“みたいな要望がガンガン来るわけで・・・ タブレット使ってどこにでも持ち運べるチェックリストをどこから印刷するんですか…というかそういう業務改善、まず先にやってからシステムの企画にしない？とか度々、感じるわけで。。。

業務をモバイルファーストで改善してからシステム屋に声かけてください、と感じさせてくれたtailwindに拍手喝采、という話でした。