mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 22:59:14 +00:00
961af8731e
## 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)
32 lines
748 B
Markdown
32 lines
748 B
Markdown
# @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.
|
|
|
|
```typescript
|
|
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.
|
|
|
|
```json
|
|
{
|
|
"dependencies": {
|
|
"@comfyorg/tailwind-utils": "workspace:*"
|
|
}
|
|
}
|
|
```
|