Rails7 + TailwindCSSの動作確認

Rails7がリリースされたので推しのTailwindCSSを使ってみました。ついでにrubyのバージョンも3に上げました。

install

# rbenvのアップグレード
brew upgrade rbenv ruby-build
# 3系があるかの確認
rbenv install --list-all | grep 3.0.0
# ruby3 インストール
rbenv install 3.0.0
# 適用
rbenv global 3.0.0

# railsインストール
gem install rails

rails new

rails new myapp --css tailwind
cd myapp
rails s

無事初期画面が表示されました。

tailwindのbuild

rails sだとtailwindのCSSクラスを追加したりしてもいらないスタイルは全てパージされてしまっているので適用されません。手動でCSSクラスを再ビルドするには以下のコマンドを打ちます。

rails tailwindcss:build

これでapp/assets/builds/tailwind.cssにビルドされているっぽい。

自動ビルド

このままだと毎回毎回rails sしてtailwind:buildしてとなり、非常に開発体験が悪いですね。
自動ビルド付きの開発用コマンドはこちら。rails sの代わりに

./bin/dev

と打ちます。すると、cssの開発サーバーとrailsサーバーが同時に立ち上がって、tailwindのスタイル追加の都度、ビルドが走るようになります。ホットリロードではないので、自分でブラウザの更新ボタンを押します。

Scaffoldしてとりあえず動くところまで確認

TailwindをnewしておくとScaffoldもTailwind仕様に勝手に変わっていました。これは嬉しい。

以上

Rails7 + Tailwindで一つ作りたいのがあるのでぽちぽち触っていこうと思います。DHHの引いた線路に乗る！