しまぶーのIT大学

• 科学・IT

Tailwind CSS講座 第2回
↪︎ https://youtu.be/T_WIbcvB5GM
Tailwind CSS講座 第4回
↪︎ https://youtu.be/2MAJuoJcOw0

Tailwind CSS動画講座の3つ目です。今回はインストール方法の紹介です。Next.jsやNuxt.jsなどのフレームワークと一緒に使うか、またはPostCSSのプラグインとして使用するのがオススメです。CSSの圧縮などはまた次回の講座で取り扱います😊✨

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

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

📙 もくじ
0:00 今回の講座の流れ
0:34 フレームワークと一緒に使う方法
1:20 PostCSS pluginとして使う方法
2:13 Tailwind CLIを用いる方法
2:39 CDN経由で用いる方法
4:44 作業用のディレクトリを作ろう
5:07 npm init -yを使おう
5:40 VSCodeで確認しよう
6:10 必要なパッケージをインストールしよう
7:17 npx tailwindcss init -pで設定ファイルを作成
8:40 PostCSSの言語拡張機能をインストール
10:00 index.htmlを準備しよう
11:04 Tailwind CSSの拡張機能をインストール
12:23 Tailwind CSSのビルドについて
12:59 ビルドコマンドを打ってみよう
14:00 PostCSSのCLIをインストールしよう
14:52 styles.cssをビルドしてdist.cssを確認
15:50 index.htmlをブラウザで確認しよう
16:34 次回予告とオンラインサロンの紹介

🔥この動画だけは見よ！
【Tailwind CSS #1】最近流行りのTailwind CSSを学ぼう
https://youtu.be/5TymbaeyV-0

【Tailwind CSS #2】Bootstrapとの違いを解説
https://youtu.be/T_WIbcvB5GM

🌏 SNS
Twitter: https://twitter.com/shimabu_it
Instagram: https://www.instagram.com/shimabu_it
TikTok: https://tiktok.com/@shimabu_it

🏷️ タグ
#tailwind #TailwindCSS #PostCSS