小编Pau*_*aul的帖子

我正在使用ViewComponent gem 和 Tailwind CSS。我使用 <%= render ExampleComponent.new(resource: @resource) %> 从视图文件渲染组件。在我的 app/components 目录中，我有 example_component.rb 和 example_component.html.erb 文件。该组件渲染良好。但是，如果我有使用响应式实用程序变体的 Tailwind CSS 类，那么它们是否有效就很重要了。例如，假设我正在使用视图组件进行渲染：

# app/components/example_component.rb
class ExampleComponent < ViewComponent::Base
  def initialize(resource:)
    @resource = resource
  end
end

使用视图组件 html.erb 文件：

# app/components/example_component.html.erb
<%= form_with url: resource_path, target: '_top', class: 'mb-2 md:mb-0' do |f| %>
  <%= f.hidden_field :resource_id, value: @resource.id %>
  <%= f.submit 'Submit', class: "w-full md:w-fit" %>
<% end %>

当显示器为中等 (md) 或更大时，Tailwind 类使底部边距从 2 更改为 0。此外，当显示器为中等或更大时，提交按钮从宽度 100% 更改为宽度 fit-content。如果我使用视图目录中的部分部分的通常 Rails 渲染来渲染它，它就可以正常工作。如果我使用 ViewComponent …