下の記事からの続きです。

【Tailwind CSS】PostCSSでTailwind CSSをはじめたい

必要なnpmパッケージのインストール

下のコマンドでbrowser-syncとnpm-run-all、watchをインストール（browser-syncはおまけ）。

npm install -D browser-sync npm-run-all watch

package.jsonのscriptsの書き換え

package.jsonのscriptsを下のコードに書き換えます。

"tailwindcss": "postcss ./src/css/main.css -o ./dist/css/output.css",
"watch/tailwindcss": "watch 'npm run tailwindcss' ./dist",
"watch/server": "browser-sync start --server ./dist --files ./dist, !node_modules/**/*",
"w": "npm-run-all -p watch/*"

tailwind.config.jsのcontentの書き換え

tailwind.config.jsのcontentを下のコードに書き換えます。

"./dist/*/.html"

ここまで終えたらターミナルに下のコマンドを入力して動作確認。

npm run w

dist内のHTMLファイルを保存するたびに、TailwindのCSSファイルが作成されれば成功です。

さて、開発環境ができたので（実際はまだ他にもやることはありますが）、まずは個人プロジェクトにとりかかって、Tailwind CSSと仲良くしていこうと思います。