field_with_error不触发尾风CSS样式
在安装了Tailwind的Rails 7应用程序中，我使用以下形式：
<%= form_with(model: project) do |f| %>
<%= f.label :name, class: "some_tailwind_css_class" %>
<%= f.text_field :name, autofocus:true, class: "some_other_tailwind_css_class" %>
<%= f.submit class: "yet_another_tailwind_css_class" %>
<% end %>当表单中没有错误时，Tailwind类将按预期触发，并且样式将完美地应用到HTML中。
但是，当表单抛出验证错误(假设：name字段为空)时，我无法将Tailwind类应用于有错误的字段(例如红色边框、红色文本)，因为field_with_error类在new.html.erb视图文件中找不到(因为它是由表单助手生成的)。
我尝试按以下方式更新application.tailwind.css，但无论发生什么情况，我都无法获得由field_with_error类触发的样式：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.field_with_errors {
label {
@apply text-red-900;
}
input, textarea, select {
@apply border-red-300 text-red-900 placeholder-red-300;
}
}
}我担心的是，由于Tailwind扫描源代码以确定要编译什么CSS (或者不编译)，所以它可能不会“看到”任何实际包含field_with_errors的HTML代码，因此不会加载添加到application.tailwind.css中的定制CSS类。
难道这不是进行Rails & Tailwind的方式吗？我在application.tailwind.css中包含的CSS中有错误吗？还是我错过了另一个问题？
回答 1
Stack Overflow用户
发布于 2022-08-27 04:37:37
正确的语法应该是
@tailwind base;
@tailwind components;
@tailwind utilities;
div.field_with_errors > label {
@apply text-red-900;
}
div.field_with_errors > :is(input, textarea, select) {
@apply border-red-300 text-red-900 placeholder-red-300;
}问题是您尝试修改基元素而不是组件。
您需要使用@layer base而不是@layer component 解释在这里
而且还
因为.field_with_errors是动态添加到网页中的。
和顺风css 编译时做树抖动，它将尝试删除所有未使用的自定义css。
因此，.field_with_errors将被删除，因此没有应用css。
为了使它保持不变，我们可以按照这个@layer声明类而不使用指南。
https://stackoverflow.com/questions/72988324
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号