Files
ComfyUI_frontend/packages/tailwind-utils
pythongosssss 4c892341e4 feat: Node search UX updates (#9714)
## Summary

Addresses feedback from the initial v2 node search implementation for
improved UI and UX

## Changes

- **What**: 
- add root filter buttons
- remove all extra tree categories leaving only "Most relevant"
- replace input/output selection with popover
- replace price badge with one from node header
- add chevrons and additional styling to category tree
- hide empty categories
- fix bug with hovering selecting item under mouse automatically
- fix tailwind merge with custom sizes removing them
- keyboard navigation
- general tidy/refactor/test

## Screenshots (if applicable)

https://github.com/user-attachments/assets/db798dfa-e248-4b48-bb56-2fa7b6c5f65f


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9714-feat-Node-search-UX-updates-31f6d73d365081cebd96c4253ad1ca53)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2026-04-27 08:47:47 +00:00
..
2026-04-27 08:47:47 +00:00

@comfyorg/tailwind-utils

Shared Tailwind CSS utility functions for the ComfyUI Frontend monorepo.

Usage

The cn function combines clsx and tailwind-merge to handle conditional classes and resolve Tailwind conflicts.

import { cn } from '@comfyorg/tailwind-utils'

// Use with conditional classes (object)
<div :class="cn('transition-opacity', { 'opacity-75': !isHovered })" />

// Use with conditional classes (ternary)
<button
  :class="cn('px-4 py-2', isActive ? 'bg-blue-500' : 'bg-smoke-500')"
/>

Installation

This package is part of the ComfyUI Frontend monorepo and is automatically available to all workspace packages.

{
  "dependencies": {
    "@comfyorg/tailwind-utils": "workspace:*"
  }
}