Rails 7 和 Tailwind 动态类

Question

我有一个带有 Tailwind 的 Rails 7 应用程序，我正在做这样的事情：

@list = [{name: "Some", width: "3/12"}, {name: "other", width: "6/12"}]

# In the view
<%= render 'mypartial': list: @list %>

# In the partial
<% list.each do |item|%>
  <div class="w-<%= item[:width] %>">
    <%= item[:name] %>
  </div>
<% end %>

该视图生成正确的 HTML ( ex: <div class="w-6/12">)，但浏览器无法识别这些类。如果我对它们进行硬编码而不传递变量，则一切正常。我做错了什么或者错过了什么吗？

Answer 1

如果有人遇到同样的问题，这来自文档。

## Class names must be spelled out

For Tailwind to work, your class names need to be spelled out. They can't be programmatically composed. So no "text-gray-#{grade}", only "text-gray-500".

Atm，我添加了一个动态变量列表tailwind.config.js，它工作正常，但您需要确保所有动态变量都在那里。

  purge: {
    safelist: [
     w-1/12,
     ....
    ],
  },