はじめに

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 は、アンダーラインをつけます。

app/views/users/index.html.erb

<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 になります。

参考情報