よしたく blog

ほぼ週刊で記事を書いています

Rails7でTailwind CSSを試す

Rails7 になって TailwindCSS が使えるようになったので、導入方法をメモしておく。

rails new

rails new をするタイミングで tailwind を導入するには--css tailwindオプションを指定する。

rails new myapp --css tailwind
cd myapp

このあたりは定型文になるが載せておく。

rails g scaffold todo name:string
rails db:create db:migrate

rails sをしてhttp://127.0.0.1:3000/todosにアクセスする。

f:id:yoshitaku_jp:20220417112311p:plain

変わっていない…

Rails7 では起動方法に注意

Rails 7 ではrails sコマンドを実行しても JavaScriptCSS がビルドされず、./bin/devコマンドで起動すると JavaScriptCSS がビルドされる。 ブラウザをリフレッシュすると TailwindCSS が適用されていることがわかる。

f:id:yoshitaku_jp:20220417112446p:plain

また、./bin/devで起動すると JavaScriptCSS を変更したときに自動的に再ビルドもしてくれるので、今後はこちらで起動することを忘れないようにしたい。