field_with_error不触发顺风CSS样式

Question

在一个安装了顺风CSS的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 %>

当表单中没有错误时，顺风CSS类将按预期触发，样式将完美地应用于HTML。

然而,当表单验证错误(假设:name字段是空的),我无法应用顺风CSS类字段错误(例如红色边界,红色文字),鉴于field_with_error类是无处可寻new.html.erb视图文件中(因为它是生成的表单辅助相反)。

我尝试更新application.tailwind.css如下，但我无法得到的样式触发的field_with_error类在HTML中无论什么:

@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;
}
}
}

我担心的是，由于顺风CSS扫描源代码以确定要编译的CSS(或不编译)，因此它可能不会"看到"。任何实际包含field_with_errors的HTML代码，因此不加载添加到application.tailwind.css的自定义CSS类。

这不是继续使用Rails的方式吗&顺风吗?是否有一个错误的CSS我包括在application.tailwind.css?还是我遗漏了另一个问题?

Answer 1

正确的语法应该是

@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