Rails: リソースの一括登録画面: 4: スタイリングの修正

前回の続きです。今回はTailwind CSSでアプリを作成した時（rails new bulk_account -c tailwind）のスキャフォールドにスタイルに合わせます。

環境

ruby 3.1
Rails 7.0.2.3
foreman 0.87.2
tailwindcss-rails 2.0.10

実装

Tailwind CSSを導入します。

bin/bundle add tailwindcss-rails
bin/rails tailwindcss:install
bin/dev

app/views/bulk_accounts/new.html.erb
notice、alert、見出しやボタンにスタイルを追加します。 
Accountの入力フォームを部分テンプレートにしました。

<div class="mx-auto md:w-2/3 w-full">
  <% if notice.present? %>
    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
  <% end %>
  <% if alert.present? %>
    <p class="py-2 px-3 bg-red-50 mb-5 text-red-500 font-medium rounded-lg inline-block" id="alert"><%= alert %></p>
  <% end %>

  <h1 class="font-bold text-4xl">New accounts</h1>

  <%= form_with(url: :bulk_accounts) do |form| %>
    <%= render partial: "account", collection: @accounts %>
    <div>
      <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
    </div>
  <% end %>
</div>

app/views/bulk_accounts/_account.html.erb
部分テンプレート用にファイルを追加します。
入力フォームのグループにスタイルを追加します。

<div class="py-2 px-3 mb-5">
  <%= fields_for "accounts[]", account do |account_fields| %>
    <%= render "account_text_field", account: account, account_fields: account_fields, key: :name %>
    <%= render "account_text_field", account: account, account_fields: account_fields, key: :email %>
  <% end %>
</div>

app/views/bulk_accounts/_account_text_field.html.erb
テキストフィールドとエラーメッセージにスタイルを追加します。

<div class="my-5">
  <%= account_fields.label key %>
  <%= account_fields.text_field key, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
  <% if account.errors[key].any? %>
    <div class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
      <%= account.errors.full_messages_for(key).first %>
    </div>
  <% end%>
</div>

課題

• Account の登録数を増減できません。

• 見栄え（名前とメールアドレスのラベル名の修正と横並び）が気になりますが一旦保留にします。

以上です。

続きを書きました。