Rails |如何使用Tailwind针对无效输入字段

Question

这很烦人，因为我觉得我什么都试过了。我的目标是当输入无效时，在无效的输入字段周围有一个红色的环。如何针对rails 6中的无效输入字段。我使用的是由设计生成的rails表单。我也在使用顺风css。

我已经尝试了以下所有方法。

.invalid{
   @apply ring-2 ring-red-700
}

.input:invalid{
    @apply ring-2 ring-red-700
} 

.input-group {
    .invalid {
        @apply ring-2 ring-red-700
    }
}

这是我用来注册用户的表格

<% content_for :devise_form do %>
    <%= form_for(resource, as: resource_name, url: session_path(resource_name),  :html => {:class => 'form-horizontal' }) do |f| %>
      <div class="input-group">
        <%= f.label :email %><br />
        <%= f.email_field :email, 
                          autofocus: true, 
                          autocomplete: "email", 
                          class: "input",
                          placeholder: "Your Email"%>
      </div>
      
      <div class="input-group">
        <%= f.label :password %><br />
        <%= f.password_field :password, 
                              autocomplete: "current-password", 
                              class: "input"%>
                              
      </div>
    
      <% if devise_mapping.rememberable? %>
        <div class="field">
          <%= f.check_box :remember_me %>
          <%= f.label :remember_me %>
        </div>
      <% end %>
    
      <div class="input-group">
        <%= f.submit "Log in", class: "btn btn-default loader" %>
      </div>
    <% end %>
    
    <hr class="mt-6 border" />
    
    <%= render "devise/shared/links" %>
<% end %>  
<%= render "devise/shared/form_wrapper" %>

那么，如何针对输入无效的字段呢？

Answer 1

我最终在浏览器中使用了开发人员工具。我检查了名为input#user_password.invalid的元素。因此，长期解决方案是使用检查元素。

Answer 2

@layer components {
  .field_with_errors { @apply border-2 border-red-700}
}