unable to dynamically assign a color attribute

[oobie11]

Having an issue coloring some title text.
I have an h2 tag that gets assigned a color based on the objects category ID, something like this

<h2 class="text-<%= category.color_code %>">Title</h2>

Then I have a method in my Category model that looks like this

    def color_code
        case id
        when 1
          "rose-400"
        when 2
          "green-300"
        when 3
          "yellow-500"
        when 4
          "yellow-300"
        when 5
          "indigo-400"
        when 6
          "purple-500"
        else
          "gray-400"
        end
    end

I'm using the bin/dev method for tailwindcss:watch
When loading the object onto the page and after II inspect my code in the browser it is rendered correctly,

<h2 class="text-rose-400">Title</h2>

but the title is not colored.

Looking at the build in app/assets/builds/tailwind.css

The colors are not included, so it seems that the css is being built before html/erb is.

Everything works fine if I manually put a color attribute in.

[dhh]

You have to change the config/tailwind.config.js to look at your models directory as well, if that's where you keep the color_code. But I'd probably recommend extracting such a translation to a helper (which is already watched for tw classes).

[oobie11]

Thanks

[oobie11]

Creating a category helper is working, but only half way from my intended use case. In the helper I am having to explicitly add the tailwind attribute like so

def color_code
    case id
    when 1
      "text-rose-400"
    when 2
      "text-green-300"
    ...
    end
end

What I am trying to do is to just change the color id in the attribute based on my categories. That way I can use the same color_code helper for text, backgrounds, etc. without having to repeat the same "case/when" statement over and over. Something like this

def color_code
    case id
    when 1
      "rose-400"
    when 2
      "green-300"
    ....
    end
end

This way I would be able to add the class text-#{color_code(category)} or bg-#{color_code(category)}using the same helper method.

[dhh]

Yeah, that's not going to work. Tailwind needs the full class listed to be able to pick it up. You'll need to duplicate the color.

[isalem75]

Usually I create a dummy page (not accessible) with a tag / class for all class names I want them to be available ..

<div class="text-rose-400 text-gray-400 text-blue-400 ........... "></div>

[isalem75]

Or a create my own custom tags using tailwind classes via @apply .. and use these custom names dynamically

[oobie11]

Great idea/work around