TailwindCSSの再導入に挑んだ

今日はサンプルのrailsを使って、TailwindCSSの再導入に挑戦した。

ここで重要なことに気づいたのだが、railsにTailwindを導入するときと素のhtmlに導入する方法と全く異なるということだ。

動画では素のHTMLに導入をするものだったので、そのままrailsに導入しても指定したパスへのビルドができなかったり、JIT(開発用のモード)も作動しなかった。「rails Tailwind」で調べたところ、下記の記事に巡り会うことができ、railsへの導入には違う方法を用いることに気づくことができた。

参照記事：
https://dev.to/davidteren/getting-started-with-rails-6-1-tailwindcss-jit-webpacker-postcss-8-25g7 
↑英文だけどスクショ多めでとても分かりやすかった

しかもこの記事はwebpackの導入も一緒に行っているものなので、本番環境への正常起動に大きな期待ができるものだった。

サンプルのrailsで導入を行なったときはいろいろエラーが発生したが、コメントも参考にしながら導入が完了した。webpack-dev-server が非常に便利で、HTMLやCSSの変更があったときに、ブラウザのリロードをせずに見た目が更新される。

この後に自分のappでTailwindの導入を行なったが、　コンテナ内部でWebpackの導入がうまくいってないようで、いくつかエラーを解決しながら進むも今日はワクチン接種があったためここで学習を終えた。

Webpackについてはこの導入の壁を乗り越えないと本番環境で自分のappをデプロイできないという強烈な「やらざるを得ない」状況になっている。
逆にこの状況でうまくモチベーションが保てているので引き続き実装を頑張っていきたい。