😑

ChatGPTにTailwindCSSのセットアップのやり方を聞くとエラーが出る件について

2025/02/15に公開

前置き

私事ながら、最近生活環境が変わりました。
それに伴いちょっとした困りごとが出来たので、その解決とお勉強も兼ねてちょっとしたWebアプリを作成しようと思い色々初めてます。
浅瀬でちゃぷちゃぷすることすら出来ない雑魚エンジニアなのでChatGPTと壁打ちしながら環境を構築しているときに遭遇した話を書いたのがこの記事

何が起きたのか

ChatGPT様から教えていただいたとおりにtailwindCSSのセットアップをしようとして失敗した
ChatGPTの返答内容

スタイリングには Tailwind CSS を使用します。

sh
コピーする
編集する
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p 

原因

npx tailwindcss init -p 

このコマンドが最新バージョンのTailwindCSSでは使えないらしい
多分ChatGPTが学習データとして使用している環境構築手順だと最新の手法がまだなかった(もしくはデータとして少なかった)のが原因と考えられる。

対策

バージョンを下げてこのコマンドが使えるようにした

npm install -D tailwindcss@3.4.17 postcss autoprefixer
npx tailwindcss init -p

余談

ChatGPTのGPT-4o mini でこの事象が起きたので、あと1年もすればこの現象は勝手に解決される(最新のデータが反映させて修正される)と考えられる
本当であれば、最新のやり方を調べて実施するべきだが、あくまでも今やりたいことを優先するべきだし調べる時間がもったいないのであえてやらなかった
最新の構築方法を教えてくれる人がいたらその内容は記事で追記します
とりあえず作りたいものを実用レベルまで来月中にはもっていって運用したいので頑張りたい

Discussion