我正在使用 viewComponent 带有尾翼CSS的宝石。我从我的视图文件中渲染组件，并使用＆lt;％= Render extplecomponent.new（资源：@Resource）％＆gt;。在我的应用程序/组件目录中，我有example_component.rb和example_component.html.erb文件。该组件使得很好。但是，如果我有使用响应效用变体的尾风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）或更大时，尾管类使底部的边距从2变为0。另外，当显示器中等或更大时，提交按钮从宽度从100％更改为宽度拟合体。如果我用通常的铁轨从视图目录中的部分呈现出来，则可以正常工作。如果我使用ViewComponent类渲染完全相同的html.erb文件，则它将无法识别“ MD：”响应式实用程序的类更改。如果我使用Chrome Dev工具来检查元素，则根本不会列出@Media类。 “ MD：”类显示在元素的类中，但在Dev Tools的样式部分中没有列出，它们不起作用。有时会发生的另一件奇怪的事情是，这些响应式的类公用事业有时会起作用，有时是行之有效。在其他时候，它们可以工作，如果我更改响应式类实用程序中的价值并重新加载页面，则它会停止工作。
我注意到的另一个奇怪的行为是一些尾风无法正常工作。我有一个属于“ Border-4”的元素，该元素将边界宽度设置为4px。它可以作为部分部分的部分工作，但是当我使用ViewComponent类渲染时，它停止工作。如果由于某种原因将其更改为“ Border-2”，则该特定的特定内容确实开始在视图组件中工作。 Bizare。
I'm using the ViewComponent gem with Tailwind CSS. I render components from my view files with <%= render ExampleComponent.new(resource: @resource) %>. In my app/components directory, I have example_component.rb and example_component.html.erb files. The component renders fine. But if I have Tailwind CSS classes that use responsive utility variants, it's hit or miss whether or not they work. For example, say I'm rendering using a view component:
# app/components/example_component.rb
class ExampleComponent < ViewComponent::Base
def initialize(resource:)
@resource = resource
end
end
with a view component html.erb file:
# 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 %>
The Tailwind classes make the bottom margin change from 2 to 0 when the display is medium (md) or larger. Also, the submit button changes from width 100% to width fit-content when the display is medium or larger. If I render this with the usual Rails render from a partial in the views directory, it works fine. If I render the exact same html.erb file using a ViewComponent class, it doesn't recognize the class changes with the "md:" responsive utilities. If I use the Chrome dev tools to inspect the element, it doesn't list the @media classes at all. The "md:" classes are displayed in the element's class, but they aren't listed in the dev tools' style section and they don't work. Another weird thing that happens sometimes is that occasionally these responsive class utilities do work and sometimes they don't. Other times, they work and if I change a value in the responsive class utility and reload the page, it stops working.
Another strange behavior I've noticed is some Tailwind classes aren't working. I have an element with "border-4" in the class which sets the border-width to 4px. It works fine as a Rails partial, but it stops working when I render it with a ViewComponent class. This particular one does start working in the view component if I change it to "border-2" for some reason. Bizare.
发布评论
评论（2）
好吧，我只是想到了这篇Reddit帖子：。我将把这个留给有同样问题的任何人。在tailwind的配置文件
tailwind.config.js中，需要将./app/components目录添加到content下的目录数组：我添加时，一切都开始工作了适当地。Well, I just figured it out thanks to this reddit post: Bug related to view components and tailwind. I'll leave this here for anyone who has the same issue. In Tailwind's config file
tailwind.config.js, the ./app/components directory needs to be added to the directories array undercontent:Once I added it, everything started working properly.我面临同样的问题。在
tailwind.config.js中，将以下行添加到您的内容：I faced same issue. In
tailwind.config.jsadd following line to your content: