TailwindCSSをサクッと体験してみたい人

TailwindCSS使ってみたいけど、公式ドキュメント読むの面倒。
YouTube動画とかもあるけどバージョン2だし、最新のバージョン3で簡単に導入するにはどうすればいいの?
今回はこんな悩みに答えます。
とりあえず3分くらいでサクッと体験できるような内容です。

こんにちは。
フロントエンド・エンジニアしんぺーです。
TailwindCSSを触る機会があったので、インストール・導入方法を解説します。
最近人気のChatGPTにもTailwindCSS使われていますね。
作業環境

エディタはVisual Studio Code。
プラグインはTailwind CSS IntelliSenseをインストールしてください。
Tailwind CSSで使うClassNameを自動補完してくれます(これないと暗記になるのできついです)。
フォルダとファイル作成
下記のようにフォルダとファイルを作成してください。
test/
├ index.html/
├ input.css/
└ dist.css/
index.htmlに記述
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- CSSのリンクはdist.cssのみ --> <link rel="stylesheet" href="dist.css"> <title>Document</title> </head> <body> <!-- 確認用にてきとうなTailwind CSSのClassNameをつけます --> <h1 class="text-7xl text-blue-900 bg-gray-200 p-10 m-10 w-fit">Hello TailwindCSS</h1> </body> </html>
input.cssに記述
@tailwind base; @tailwind components; @tailwind utilities;
dist.cssは空でOK
dist.cssはコンパイル後に自動で記述されるので、なにも書かなくてOKです。
ターミナルでごにょごにょします(設定ファイルとか色々自動生成します)

ターミナルでtestフォルダに移動します
ターミナルを開いたらcd
(cd半角スペース)のあとに、test
フォルダをドラッグ&ドロップしてEnter。

tailwindcssとautoprefixerをインストール
ターミナルで実行します。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
実行するとtestフォルダ内に、下記のフォルダやファイルが自動生成されます。
node_modules(フォルダ。なんかいっぱい入ってる) package-lock.json package.json tailwind.config.js
tailwind.config.jsに記述
/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./index.html"], purge: ["./index.html"], theme: { extend: {}, }, plugins: [], }
※これを記述しないと、CSS効かないです。TailwindCSSの導入記事や動画はVerson.2が多くここの解説がないので、このあたりで詰まる方も多いのではないでしょうか。
post.config.js作成(設定用ファイル)
ターミナルで実行します。
npx tailwindcss init -p
testフォルダ内にpost.config.js
が作成されます。
CSSを反映させる

package.jsonに記述
{ "devDependencies": { "autoprefixer": "^10.4.8", "cssnano": "^5.1.13", "postcss": "^8.4.16", "tailwindcss": "^3.1.8" }, "scripts": { "dev": "tailwindcss -i input.css -o dist.css --watch" } }
実行してdist.cssにコンパイル
ターミナルで実行します。
npm run dev
dist.cssに自動でスタイルが追加される(522行くらい)。
この段階でindex.html
をプレビューするとTailwind.cssのスタイルが反映されているはずです。
保存するたびに反映されるようにwatchしているので、実行中の処理を停止させる場合はcontrol + C
で止めます。
終わりに
お疲れさまでした。
これでTailwindの導入は完了です。
チートシートなどを参照しながら遊んでみてください。
ちょっと内容が短かったので、おまけつけます。
おまけ

本番環境用にdist.cssを圧縮(minify)する
本番環境用にdist.css
をminifyする方法を解説します。
cssnanoインストール
ターミナルで実行します。
※npm run dev
を実行中の場合は、control + C
で一旦処理を停止させてください。
npm i -D cssnano
package.json
にcssnano
が追加されます。
"devDependencies": { "autoprefixer": "^10.4.8", "cssnano": "^5.1.13", "postcss": "^8.4.16", "tailwindcss": "^3.1.8" }
package.jsonに追記します
下記のように追記します。
{ "devDependencies": { "autoprefixer": "^10.4.8", "cssnano": "^5.1.13", "postcss": "^8.4.16", "tailwindcss": "^3.1.8" }, "scripts": { "dev": "tailwindcss -i input.css -o dist.css --watch", "build": "NODE_ENV=production tailwindcss -i input.css -o dist.css --minify" } }
post.config.jsに追記
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}) }, }
npm run buildを実行
ターミナルでnpm run build
を実行すると、dist.css
がminifyされます。
最後に

解説は以上です。
最後までありがとうございました。
Tailwind CSS導入時にV2の記事が多く、ドキュメントは英語だったので時間がかかりました。この記事が少しでも誰かの助けになれば幸いです。