我使用ViewComponent gem和Tailwind CSS。我使用〈%= render ExampleComponent.new（资源：@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 %>

当显示为中等时，Tailwind类会将底边距从2更改为0（md）或更大。另外，当显示器为中等或更大时，提交按钮从宽度100%变为宽度适合内容。如果我使用通常的Rails呈现器从views目录中的一个partial呈现此按钮，它将工作正常。如果我使用ViewComponent类呈现完全相同的html.erb文件，它不能识别“md：“响应工具的类更改。如果我使用Chrome开发工具检查元素，它根本不会列出@media类。“md：“类显示在元素的类中，但它们没有列在开发工具的样式部分，它们不工作。另一个有时会发生的奇怪事情是，这些响应类工具有时工作，有时不工作。其他时候，它们工作，如果我在响应类工具中更改一个值并重新加载页面，它就停止工作。
我注意到的另一个奇怪的行为是一些Tailwind类不工作。我在类中有一个带有“border-4”的元素，它将border-width设置为4px。它作为Rails部分元素工作得很好，但是当我用ViewComponent类呈现它时，它就停止工作了。如果我出于某种原因将它更改为“border-2”，这个特定的元素确实会在视图组件中开始工作。奇怪。