We published a gem that helps create maintainable Tailwind components in Ruby

rubyonrails-talk
1

:wave: Hey.

I released a gem that helps developers create and maintain their own custom Tailwind components using classes and states.

It’s called class_variants.

This is how one could use it to create the button component from Tailwind UI

button_classes = ClassVariants.build(
  "inline-flex items-center rounded border border-transparent font-medium text-white hover:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2",
  variants: {
    size: {
      sm: "px-2.5 py-1.5 text-xs",
      md: "px-3 py-2 text-sm",
      lg: "px-4 py-2 text-sm",
      xl: "px-4 py-2 text-base",
    },
    color: {
      indigo: "bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500",
      red: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
      blue: "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500",
    },
  },
  defaults: {
    size: :md,
    color: :indigo,
  }
)

# Call it with our desired variants
button_classes.render(color: :blue, size: :sm)
button_classes.render
button_classes.render(color: :red, size: :xl)

Thank you✌️

1 Like