Breadcrumbs on Rails with Tailwind

I’m trying to write a custom builder to use with Breadcrumbs on Rails. I am using Tailwind for my styles but it doesn’t seem to play nicely with Rails-generated code.

I have the following builder:

class TailwindBreadcrumbsBuilder < BreadcrumbsOnRails::Breadcrumbs::Builder
  def render
    @context.content_tag(:nav, class: 'flex py-3 px-5 text-slate-700 bg-slate-50 rounded-lg border border-slate-200', aria: { label: 'Breadcrumb' }) do
      @context.content_tag(:ol, class: 'inline-flex items-center space-x-1 md:space-x-3') do
        @elements.collect do |element|
          render_element(element)
        end.join.html_safe
      end
    end
  end

  def render_element(element)
    current = @context.current_page?(compute_path(element))
    aria = current ? { aria: { current: 'page' } } : {}

    @context.content_tag(:li, aria) do
      @context.content_tag(:div, class: 'flex items-center') do
        link_or_text = @context.link_to_unless_current(compute_name(element), compute_path(element), element.options.merge(class: 'ml-1 text-sm font-medium text-slate-700 hover:text-white md:ml-2'))
        divider = @context.content_tag(:span, (@options[:separator] || '>').html_safe, class: 'divider') unless current

        link_or_text + (divider || '')
      end
    end
  end
end

and I initialize the breadcrumbs on the page with:

<%= render_breadcrumbs builder: ::TailwindBreadcrumbsBuilder %>

However, not all styles are being applied (for example, the white text on hover does not work).

I suspect the Tailwind server doesn’t compile these classes since they are Ruby-generated. Any idea how I can get this builder to work with Tailwind?

Thanks in advance

>Solution :

If you are using Tailwind v3, the classes are "purged" by default.

Since this is a ruby helper, I’d assume that this particular file was not added to the content list in tailwind.config.js.

Perhaps try adding something like this your config file:

module.exports = {
  content: [
    "./app/views/**/*.html.erb", 
    "./app/helpers/**/*.rb", 
    "./app/javascript/**/*.js", 
    "path/to/your/file.rb"
  ],
  // ... your other configs
}

Hope that helps!