Dynamically-generated Class Names Getting Purged

[dickdavis]

Consider the following example function:

def style_for_btn_outline(color)
  "bg-transparent text-#{color}-500 border-#{color}-500 hover:bg-#{color}-500 hover:text-white"
end

When passed a color name, it generates a string of class names which can be appended to the class list for a button. If given the color "blue", it will generate the following string: bg-transparent text-blue-500 border-blue-500 hover:bg-blue-500 hover:text-white.

If the classes text-blue-500 border-blue-500 hover:bg-blue-500 are not used elsewhere in the project, the purger will remove them since they have not been explicitly specified.

As a quick hack for getting around this, I defined a constant like this:

module ApplicationHelper
  KEEP_THESE_CLASSES = 'text-blue-500 border-blue-500 hover:bg-blue-500'
end

While this is obviously not ideal, it works since it allows the purger to read those values and thus not purge them.

I could refactor the style_for_btn_outline method to something like this:

def style_for_btn_outline(color)
  case color
  when "red"
    "bg-transparent text-red-500 border-red-500 hover:bg-red-500 hover:text-white"
  when "blue"
     "bg-transparent text-blue-500 border-blue-500 hover:bg-blue-500 hover:text-white"
  end
end

Since I'm explicitly specifying the color classes per color, the purger keep the classes; I just need to repeat for each of the colors that I want to provide styles for.

But it seems like setting class names dynamically might be something that would make sense to want to do in certain instances. It feels like something that would be fairly natural to do.

What are your thoughts? Which of the two workarounds listed above makes the most sense in your opinion? Thanks for your time.

[dixpac]

I'm not sure about this. This is also the issue on the TW purger (PurgeCSS). Tailwind official docs recommend to avoid these kind of dynamic classes.

Your refactor example seems more reasonable when we look at the tailwind philosophy, you can also create custom classes such as btn btn--primary

[dhh]

Yeah, this is standard Tailwind policy. Can't use interpolation.

[dickdavis]

Thanks for the feedback!

[dickdavis]

For anyone who might stumble onto this issue, I created a gem that helps out with this: https://github.com/d3d1rty/utility_classes