Skip to content

Conversation

@sohara
Copy link
Contributor

@sohara sohara commented Apr 29, 2025

In adopting Ruby UI I noticed that the Table component class names were not being merged correctly, which broke the hover effect.

  • bg-opacity utilities are removed in Tailwind 4
  • As such recent versions of tailwind_merge no longer supports them:
[8] pry(main)> merger = TailwindMerge::Merger.new
[7] pry(main)> merger.merge("border-b transition-colors hover:bg-muted hover:bg-opacity-50 data-[state=selected]:bg-muted")
=> "border-b transition-colors hover:bg-opacity-50 data-[state=selected]:bg-muted"

For RubyUI, recent versions of Tailwind and tailwind_merge are installed or recommended by default.

I noticed that the docs for RubyUI get around this by using a version of tailwind merge that has tailwind 3.x semantics, but I think it would be best to use Tailwind 4 semantics/utilities.

@sohara sohara changed the title fix: using tailwind 4 bg clases with modifiers fix: use tailwind 4.x bg clases with modifiers Apr 29, 2025
@stephannv
Copy link
Contributor

LGTM! Thanks!

@stephannv stephannv merged commit b4beb97 into ruby-ui:main May 7, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants