はじめに
Rails 7.0.0 では、tailwindcss が簡単に利用できるようになっています。
今回は、tailwindcss を試してみたいと思います。
tailwindcss を使うためには、npm と yarn が必要です。
以下のバージョンで確認しました。
- Ruby 3.0.2
- Rails 7.0.0
- npm 8.3.0
- yarn 1.22.17
Rails プロジェクトを作る
新しくRailsプロジェクトを作ります。このとき -j
と --css
を指定します。
-j
オプションを指定しないと途中でエラーになります。
( --database
で postgresql を指定しているのに深い意味はありません。)
esbuild
はインストールしておく必要はなく rails new
でプロジェクト作成中にインストールされます。
mkdir rails_sandbox
cd rails_sandbox
rails new . --database=postgresql -j esbuild --css tailwind
scaffold を実行する
scaffold を使って簡単なCRUDを作ります。 tailwind
の確認をしたいだけなので適当です。
bin/rails g scaffold User name
DBを作成し migration を実行する
bin/rails db:create db:migrate
Rails を実行する
動作を確認するため、Rails を実行します。 Procfile.dev
を指定して foreman
を実行します。
foreman start -f Procfile.dev
ブラウザからアクセスする
http://localhost:3000/users
にアクセスします。
tailwindcss が使えることを確認する
tailwindcss
が使えることを確認するため、 app/views/users/index.html.erb
を修正します。
New User
のリンクをボタンっぽくしてみます。
また、 Show this user
は、アンダーラインをつけます。
<p style="color: green"><%= notice %></p>
<h1>Users</h1>
<div id="users" class="mb-6 mt-2">
<% @users.each do |user| %>
<%= render user %>
<p class="mb-2">
<%= link_to "Show this user", user, { class: "underline" } %>
</p>
<% end %>
</div>
<%= link_to "New user", new_user_path, { class: "ml-1 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded" }%>
ブラウザの画面は以下のようになります。
tailwindcss のバージョン
package.json
を調べてみたところ、tailwindcss の 3.0.8 になってました。
grep tailwind package.json
"tailwindcss": "^3.0.8"
"build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
まとめ
今回は、tailwindcss が使えることを確認しました。
試したコードは、 https://github.com/suketa/rails_sandbox/tree/try_rails7_tailwindcss になります。