Utility for merging lists of classes

[sdhull]

Hello friends! Thanks for this lovely utility—it really helped me get up and running with tailwind css in my new Rails project very quickly & painlessly. I'm new to tailwind, so I apologize in advance for my blindspots. Anyway...

I'm frequently setting a string of default classes (button defaults, form input defaults, label defaults, h1 defaults, etc etc). But I want to be able to override various attributes of them on a case-by-case basis. Frankly this challenge first came to my attention when I was investigating how to get my forms looking good with tailwind + simple_form. I stumbled on this post, here's the relevant bit:

Now, how does this custom-class get merged with the default classes that we may have defined for the labels? The answer is that Simple Form simply appends the custom class(es) to the default classes. This may work well for traditional CSS styling where we can easily target arbitrary combinations of elements, ids and classes in the CSS and thus ensure that the specificity of the custom-class will be high enough to override the defaults. In Tailwind, most classes have the same specificity and in that situation, according to the CSS cascading rules, the class that appears last in the Tailwind-generated CSS file is the one that wins which is most probably not what we want.

The article recommends supporting a remove_classes: argument, which I'll admit works but IMO it makes the abstraction leaky. Conceptually it's certainly possible to write a utility that would take a list of default classes and override classes and produce a list that automatically removes classes from the default list that target the same css property.

I took a stab at this with an icon helper:

module IconHelper
  DEFAULT_CLASSES = {
    "w" => "w-5",
    "h" => "h-5",
    "ml" => "ml-4",
    "text" => "text-gray-800",
    "dark:text" => "dark:text-white",
  }.freeze

  def icon(name, **kwargs)
    klass = kwargs[:class] || ""
    style = kwargs[:style] || :outline
    classes = {}
    klass.to_s.split(" ").each do |klass|
      prefix, *_rest = klass.split("-")
      classes[prefix] = klass
    end
    classes = DEFAULT_CLASSES.merge(classes).values.join(" ")

    render "icons/#{style}/#{name}", classes: classes
  end
end

It works fine for this use-case, however as I looked at doing this for my button classes, I started to realize that sometimes prefixes actually include the first dash 😭 so this naive approach won't suffice. I'm sure the code could be optimized too.

I'm wondering if such a thing already exists anywhere (surely I can't be the first person who's taken a stab at this), or if there's some other approach folks are taking?

[sdhull]

Ok, new idea: i could have a list of prefixed regexps and for each one,if it matches the override list, it gets gsubbed out of the default list.

Probably too computationally expensive to use at render time 😕

[sdhull]

Talked with my friend about this and he informs me I'm thinking of this all wrong. I'm trying to be too clever, and instead of merging lists of classes, I should be including fewer default classes... basically anything I may want to vary should be specified in each case.

There's still something that bothers me about this... it's not DRY. If I end up repeating the same lists of default classes in a bunch of places, then if I want to make sweeping changes, i'll have to hunt them all down and change them in each place.

I still think there must be a way to strike a balance here, but I'm not sure what it is.

[KjellMorgenstern]

You can avoid repeating class lists by using Partials. And a more advances approach, to configure some properties and even have unit tests, is to use ViewComponents . One article I liked: https://evilmartians.com/chronicles/viewcomponent-in-the-wild-building-modern-rails-frontends.
Basically you keep styles DRY, along with the markdown and ruby code they are often tightly coupled with.

[sdhull]

Thanks for the reply @KjellMorgenstern! To clarify my issue a bit:

I think the issue I'm having is actually from keeping styles DRY... for example, if I'm building a view component for something and I know I'll typically want some padding, I might have something like this:

class SpecialComponent < ApplicationViewComponent
  DEFAULT_CLASSES = "px-4 py-2"

  def initialize(**opts)
    @classes = opts[:class]
  end

  def classes
    "#{DEFAULT_CLASSES} #{@classes}"
  end

  def call
    content_tag :div, class: classes, "Super special!"
  end
end

If I create this component and try to render it with more or less padding, it won't work properly, eg:

SpecialComponent.new(class: "px-3 py-1") # => can't really override the padding classes

That EvilMartians article (well, the 2nd part of it anyway) has a lot to think about and digest. But one cool thing is they mentioned TailwindMerge and upon googling, I found a gem! I haven't tried it yet but am about to ...

[flavorjones]

I think @sdhull's most recent comment is right: use https://github.com/gjtorikian/tailwind_merge for merging tailwind classes.

@sdhull Are you happy with how TailwindMerge works?

[sdhull]

In short: yes, I was happy with it. The long version: I only used it for a month or two before that side project went in a different direction, but in that time I had no complaints with https://github.com/gjtorikian/tailwind_merge... it did what it said, and never got in my way (but again—that was only for a month or two).

Anyway, here's a real-world example of a ViewComponent I built for headers, using Flowbite combos of classes. I also used style variants from @palkan's view_component-contrib gem. I had a dream of building ViewComponents of every component from Flowbite but I didn't get around to it 🤷

class H::Component < ApplicationViewComponent
  option :size
  option :weight
  option :html_class, optional: true

  style do
    base {
      %w[dark:text-white]
    }
    variants {
      size {
        h1 { "text-5xl" }
        h2 { "text-4xl" }
        h3 { "text-3xl" }
      }
      weight {
        extrabold { "font-extrabold" }
        bold { "font-bold" }
      }
    }
    defaults { {size: :h1, weight: :extrabold} }
  end

  def classes
    TailwindMerge.instance.merge("#{style(size: size, weight: weight)} #{html_class}")
  end

  def call
    content_tag size, content, class: classes
  end
end