使用 Tailwind 在 Rails 上的面包屑导航

Question

我正在尝试编写一个自定义生成器以与 Breadcrumbs on Rails 一起使用。我正在为我的样式使用 Tailwind，但它似乎不能很好地与 Rails 生成的代码一起使用。

我有以下生成器：

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

然后我用以下代码初始化页面上的面包屑：

<%= render_breadcrumbs builder: ::TailwindBreadcrumbsBuilder %>

但是，并非所有样式都被应用（例如，悬停时的白色文本不起作用）。

我怀疑 Tailwind 服务器不会编译这些类，因为它们是 Ruby 生成的。知道如何让这个构建器与 Tailwind 一起工作吗？

提前致谢

Answer 1

如果您使用的是 Tailwind v3，类默认情况下会被“清除”。

因为这是一个 ruby 助手，我假设这个特定文件没有添加到 tailwind.config.js 中的 content 列表中。

也许尝试在您的配置文件中添加类似这样的内容：

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

希望对您有所帮助！

使用 Tailwind 在 Rails 上的面包屑导航

Breadcrumbs on Rails with Tailwind

ruby-on-rails

breadcrumbs

tailwind-css