field_with_errorsのレイアウトが崩れるのを防ぐ【Tailwind css】

背景

ユーザ管理機能のgem「devise」を導入後、新規登録設定を実施
新規登録に失敗した際にレイアウトが崩れてしまうことを確認
Googleの検証ツールを使用して確認したところ
元は「class="reg_info_field"」というクラスの親に
「div class="field_with_errors"」が追加されていた
見た目が変わるのはよくないため修正を行う

今回もQiitaさんに投稿されている方々にお世話になりました、
ありがとうございます

参考文献
field_with_errorsによるレイアウト崩れを防ぐ
Railsのバリデーションエラーで、「field_with_errors」によるレイアウト崩れを防ぐ

開発環境

• Ruby 3.0.0
• Rails 6.1.3.1
• tailwindcss 2.0.4

改善前の状態

下記の画像は新規登録画面の一部を切り取ったもの
レイアウトが崩れてない状態
Googleの検証ツールで確認したところclass名「reg_info_field」

上記の状態が新規登録の失敗をすると・・・・
入力欄が狭くなっている
加えて「div class="field_with_errors"」が親になっているではないか・・・・

解決方法

@mogurinchuさんの投稿の「field_with_errorsによるレイアウト崩れを防ぐ」
の情報によると下記の2点でいけるらしいのどっちも試す

• 自動で読み込まれるfield_with_errorsタグを読み込まないように設定する
• field_with_errorsに対してCSSをあてる

方法１

・自動で読み込まれるfield_with_errorsタグを読み込まないように設定する

config/application.rb

module TestTailwind
  class Application < Rails::Application
   /* 下記追記 */
　　config.action_view.field_error_proc = Proc.new { |html_tag, instance| html_tag }
  end
end

解決!!

方法２

・field_with_errorsに対してCSSをあてる
こちらの記事「Railsのバリデーションエラーで、「field_with_errors」によるレイアウト崩れを防ぐ」を少し参考
「Tailwind css」だと少し異なる!!
Tailwind cssだと「display: contents;」は「contents;」だけとなる

app/javascript/css/tailwind.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* 下記追記 */
@layer components {
  /* 「field_with_errorr」にCSSをあてる */
  .field_with_errors {
    @apply contents;
  } 
}

解決!!

おわりに

レイアウトが崩れることに関しては上記の方法で問題はなさそう
しかし、どちらを採用したほうがいいのか判断が出来なかった・・・

• 処理速度の違いがあるのか
• webpackに影響でやすいのか
• ローカル環境だから問題はないが、本番環境で影響がでるのか

知識がないため、これらなどを判断する術もなし・・・・
とりあえず、様子見してみる!!

参考文献

field_with_errorsによるレイアウト崩れを防ぐ
Railsのバリデーションエラーで、「field_with_errors」によるレイアウト崩れを防ぐ