Rails 7 and Tailwind dynamic classes

Question

I have a Rails 7 app with tailwind where I'm doing something like this:

@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 %>

The view generates the proper HTML (ex: <div class="w-6/12">), but the classes are not recognized in the browser. If I hard code them without passing the variable, everything works fine. Am I doing something wrong or missing something?

Answer 1

In case someone has the same issue, this is from the doc.

## 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, I added a list of dynamic variables in tailwind.config.js and it works ok, but you need to make sure all the dynamic variables are there.

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