Tailwind CSSで爆速デザインマークアップ！

2020年7月18日にYouTube Liveで開催された「サマーインターン前にツヨツヨになっちゃおうの会」で登壇した際の資料です。
https://connpass.com/event/181419/

Twitter: https://twitter.com/920oj
Web: https://920oj.net/
Contact: oj[at]920oj.net

Transcript

1. Tailwind CSS で 爆速 デザインマークアップ！ by おーじぇい (@920OJ)
2. こんにちは おーじぇいといいます 東京都市大学 メディア情報学部 社会メディア学科 B3 - Web開発者を目指しています - 主にVue.js(Nuxt.js)でWebフロントエンド開発 - 学生エンジニア団体Steg 技術統括 - 五目ご飯が大好き @920OJ
3. とりあえず予防線張っておくか…… つよつよな話・難しい話ではないので リラックスして聴いてね❤
4. みなさん デザイン って難しくないですか？
5. 見る人によっては強いストレスを与える画像（閲覧注意）
6. 【驚愕】人類の叡智を集結させた結果がこちら…… CSSフレームワーク の登場
7. 【驚愕】人類の叡智を集結させた結果がこちら…… - デザインがわからなくても“ある程度”きれいな見た目が作れる - ややこしいレスポンシブ対応が比較的ラクに （フレームワークごとのメディアクエリのルールに乗っかる） - 場合によっては一行もCSSを書かないでOKな場面も……（後述）
8. ドのつく素人のワタシでもWebサイトが作れたこれだけの理由 定番CSSフレームワーク「Bootstrap」 - Twitter社が作った - 特定のクラス名を付与するとスタイルが当たる - 「コンポーネント」の考え方 →部品を組み合わせてWebページを構築する - jQueryによって動的な表示も実現（v4まで） →モーダルや表示/非表示トグルなどの よく使う機能がすぐに使える
9. ドのつく素人のワタシでもWebサイトが作れたこれだけの理由 定番CSSフレームワーク「Bootstrap」 - Twitter社が作った - 特定のクラス名を付与するとスタイルが当たる - 「コンポーネント」の考え方 →部品を組み合わせてWebページを構築する
10. Bootstrapはつらい - 細かい調整がやりにくい →結局CSSを書いてグチャグチャになる 特にpadding/margin指定が……orz - 似たりよったりのデザインになる →分かる人には「これBootstrapだ！」とバレる 現 実 の 世 界 は 、 ど う し て こ ん な に つ ら く き び し い の だ ろ う … 。
11. 颯爽と登場……！
12. 颯爽と登場……！ https://tailwindcomponents.com/
13. Tailwind CSSってなんぞや ユーティリティー ファースト な CSSフレームワーク
14. ユーティリティーファーストの会
15. ボタンのコードを見てみよう
16. ボタンのコードを見てみよう
17. ボタンのコードを見てみよう
18. Bootstrap VS Tailwind CSS .btn .btn-primary .bg-blue-500 .hover:bg-blue-700 .text-white .font-bold .py-2 .px-4 .rounded
19. Bootstrap VS Tailwind CSS
20. Bootstrap VS Tailwind CSS .btn: ボタンの形・フォントウェイト、margin/paddingなど .btn-primary: ボタンの色 .bg-blue-500 背景色をblue-500に .hover:bg-blue-700 ホバーしたら背景色blue-700 .text-white 文字の色は白に .font-bold 文字のを太字に .py-2 y方向paddingを2(0.5rem) .px-4 x方向paddingを4(1rem) .rounded まるみをつける
21. Bootstrap VS Tailwind CSS .btn: ボタンの形・フォントウェイト、margin/paddingなど .btn-primary: ボタンの色 .bg-blue-500 背景色をblue-500に .hover:bg-blue-700 ホバーしたら背景色blue-700 .text-white 文字の色は白に .font-bold 文字のを太字に .py-2 y方向paddingを2(0.5rem) .px-4 x方向paddingを4(1rem) .rounded まるみをつける コンポーネントクラス 大きく区切る
22. Bootstrap VS Tailwind CSS .btn: ボタンの形・フォントウェイト、margin/paddingなど .btn-primary: ボタンの色 .bg-blue-500 背景色をblue-500に .hover:bg-blue-700 ホバーしたら背景色blue-700 .text-white 文字の色は白に .font-bold 文字のを太字に .py-2 y方向paddingを2(0.5rem) .px-4 x方向paddingを4(1rem) .rounded まるみをつける ユーティリティクラス 部品ではなく効用
23. いやいやいやいや って、おーい（笑） ちょっとマテ茶✋(^し^)
24. ギモン1・えっそもそもなんでこれが必要なの？ .btnクラスを作れば良いのでは？ - クラスの命名規則に悩む必要がない！ どうせ命名規則は守られない（？） - containerの中身はflexだけ、なんてことも 冗長になるのを防ぐ - 後のCSS変更時に不具合が生じない 複数使われているクラスを変更するのは怖い HTML上でどうなっているのかがすぐ分かる
25. ギモン2・インラインCSSで良くない？ コード的には同じでは？ - 色コード・サイズ値などを直接書かなくて良い Tailwind CSSでは基準となるサイズ・色などが 定義されている →値を書かなくて良い - レスポンシブデザイン対応がラク - 疑似要素（:hoverなど）が簡単
26. 魅力を語るよ～ デフォルトのカラーパレット - もう配色に悩まなくて良い…… - .bg-blue-400で背景を「青400」に .text-blue-400で文字を「青400」に - Sassの変数っぽい https://tailwindcss.com/docs/customizing-colors/
27. 魅力を語るよ～ レスポンシブ対応が簡単 - 面倒なメディアクエリ Tailwind CSSのルールに従えばラク - それぞれのクラス名の冒頭に「sm:」や「md:」 をつけるだけでOK！ https://tailwindcss.com/docs/customizing-colors/ ↓ 横幅によって背景色が変わる
28. ギモン3・冗長じゃない？ 毎回同じこと書くのはメンドイ！！！！！ コードの再利用はJSフレームワーク等で担えばOK VueやReactを使って、コンポーネントに切り分ける
29. ギモン3・冗長じゃない？ 毎回同じこと書くのはメンドイ！！！！！ コードの再利用はJSフレームワーク等で担えばOK VueやReactを使って、コンポーネントに切り分ける ※Nuxt.jsでの簡単な例です
30. ギモン3・冗長じゃない？ 毎回同じこと書くのはメンドイ！！！！！ コードの再利用はJSフレームワーク等で担えばOK VueやReactを使って、コンポーネントに切り分ける ※簡単な例です
31. なぜ爆速でマークアップできるのか？（タイトル回収） - HTMLのみで完結 →CSSと行ったり来たりしなくてOK - 決められた大きさ・色ルールに則る →自分で決めなくて良い、 チームで統一することもできる - クラス名を考える必要がない →実は結構なコスト削減 - VSCodeの拡張機能もあります - チートシートなんてものも…… https://nerdcave.com/tailwind-cheat-sheet
32. Tailwind UIなんてのもあります
33. まとめ - 紹介しきれなかった便利な機能はいっぱいあります！！ カスタムテーマでの拡張 PurgeCSSでの未使用CSSの削除など - 「Utility First」というアプローチでのフレームワーク 低レベルから攻めることで柔軟に・爆速でデザインマークアップが可能 CSSフレームワークでありがちな「◦◦っぽさ」を無くせる Tailwindとは「追い風」 爆風を背に、この夏を駆け抜けろ！！