【Tailwind CSS #2】Bootstrapとの違いを解説

Tailwind CSS講座 第1回
↪︎    • 【Tailwind CSS #1】最近流行りのTailwind CSSを学ぼう  
Tailwind CSS講座 第3回
↪︎    • 【Tailwind CSS #3】4つのインストール方法の紹介。オススメは...  

Tailwind CSS動画講座の2つ目です。今回はBootstrapとの比較を行いました。動画では出していないですがBulmaやFoundationも同様です。ビルド前提か否かなど、そもそもの一般的な使い方に違いがありそうなので単純比較が難しいですが、1つの参考になれば幸いです。また最近はBootstrapに触れていなくて経験値は低いので間違いなどありましたらご指摘いただけますと助かります！🙏

オンラインサロン「IT KINGDOM」を運営しています。プログラミングを学びたい方、一緒に勉強する仲間を探したい方にオススメです！
https://it-kingdom.com
※ このサイトも私がReact × Next.js × TypeScriptで作っています

👨‍💻 しまぶー？
・文系未経験から独学でヤフーにエンジニア就職
・Yahoo! JAPANアプリのWebフロントエンド開発チーム
・現在は株式会社GameHintの代表取締役
・オンラインサロン「IT KINGDOM」の運営

📙 もくじ
0:00 はじめに
1:17 Bootstrapとの違い3点
2:06 Bootstrapでボタンを作る
2:43 Tailwind CSSでボタンを作る
4:46 BootstrapとTailwind CSSの柔軟性
6:40 CSSフレームワークはインテリアデザインだ
7:49 Tailwind CSSの@applyについて紹介
9:24 ファイルサイズの比較
11:57 BootstrapでPurgeCSSが使えるか？
12:33 JavaScriptへの依存に関する話
14:04 Headless UIの紹介
15:00 JavaScript依存への良し悪し
15:30 Bootstrapは無駄なJSも読み込みがち
16:15 JSフレームワークとの相性について
17:44 Chakra UIやMaterial UIの紹介
20:28 独自のデザインとBootstrap
21:26 おわりに

🔥この動画だけは見よ！
【Tailwind CSS #1】最近流行りのTailwind CSSを学ぼう
   • 【Tailwind CSS #1】最近流行りのTailwind CSSを学ぼう  

【CSS #1】基礎からちゃんと学ぶ CSS 入門！基本構文を抑えよう！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】
   • 【CSS #1】基礎からちゃんと学ぶ CSS 入門！基本構文を抑えよう！【...  

【HTML/CSSレイアウト #1】実践的かつデザインも学べるレイアウト講座を開講します【ヤフー出身エンジニアの初心者向けプログラミング講座】
   • 【HTML/CSSレイアウト #1】実践的かつデザインも学べるレイアウト講...  

🌏 SNS
Twitter:   / shimabu_it  
Instagram:   / shimabu_it  
TikTok:   / shimabu_it  

🏷️ タグ
#TailwindCSS #tailwind #bootstrap