mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-26 19:09:52 +00:00

Files

filtered 961af8731e Split Tailwind utility functions out to a shared package (#5777 )

## Summary

Split tailwind utils out to a shared package within the monorepo.

## Changes

- Creates `@comfyorg/tailwind-utils` package
- Does not require export, publishing, etc
- Uses `export` to ensure this change does not impact other PRs (many
imports to update)
- If we _want_ to update all imports, there are two commits ready to be
re-applied
  - e.g. `git revert 80960c2a82c0d1ac06eee1bb83ac333216b2b376`

## Review Focus

- Is this pattern desirable?
- Should we just include this in a broader design-system split? I kind
of vote yes, but also it's a good small, first step.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5777-Split-Tailwind-utility-functions-out-to-a-shared-package-2796d73d3650815f976fc73b4fb86ef3)
by [Unito](https://www.unito.io)

2025-09-25 16:55:21 -07:00

src

Split Tailwind utility functions out to a shared package (#5777 )

2025-09-25 16:55:21 -07:00

package.json

Split Tailwind utility functions out to a shared package (#5777 )

2025-09-25 16:55:21 -07:00

README.md

Split Tailwind utility functions out to a shared package (#5777 )

2025-09-25 16:55:21 -07:00

tsconfig.json

Split Tailwind utility functions out to a shared package (#5777 )

2025-09-25 16:55:21 -07:00

README.md

@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-gray-500')"
/>

Installation

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

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