feat: add eslint-plugin-better-tailwindcss for Tailwind v4 linting#9245
Merged
christian-byrne merged 3 commits intomainfrom Mar 4, 2026
Merged
feat: add eslint-plugin-better-tailwindcss for Tailwind v4 linting#9245christian-byrne merged 3 commits intomainfrom
christian-byrne merged 3 commits intomainfrom
Conversation
dosubot
bot
added
the
size:S
🎭 Playwright: ❌ 545 passed, 1 failed · 6 flaky❌ Failed Tests📊 Browser Reports
|
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds the better-tailwindcss ESLint plugin and recommended config (Tailwind v4) to the repo and workspace catalog, disables five specific better-tailwindcss rules via an inline config pointing at Changes
Estimated Code Review Effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
🎨 Storybook: ✅ Built — View Storybook |
📦 Bundle: 4.49 MB gzip 🔴 +189 BDetailsSummary
Category Glance App Entry Points — 17.7 kB (baseline 17.7 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 912 kB (baseline 912 kB) • 🟢 -2 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 72.1 kB (baseline 72.1 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 9 added / 9 removed Panels & Settings — 436 kB (baseline 436 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 10 added / 10 removed User & Accounts — 16 kB (baseline 16 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 5 added / 5 removed Editors & Dialogs — 736 B (baseline 736 B) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 1 added / 1 removed UI Components — 47 kB (baseline 47 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed Data & Services — 2.73 MB (baseline 2.73 MB) • 🟢 -2 BStores, services, APIs, and repositories
Status: 13 added / 13 removed Utilities & Hooks — 55.5 kB (baseline 55.5 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 11 added / 11 removed Vendor & Third-Party — 8.86 MB (baseline 8.86 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 7.91 MB (baseline 7.91 MB) • 🟢 -25 BBundles that do not match a named category
Status: 51 added / 51 removed |
⚡ Performance Report
Raw data{
"timestamp": "2026-03-04T22:28:14.194Z",
"gitSha": "3601e100df602875fbd82b261b5fb14fa20f0495",
"branch": "ci/tailwind-v4-linter-re-enable",
"measurements": [
{
"name": "canvas-idle",
"durationMs": 2039.9580000000128,
"styleRecalcs": 126,
"styleRecalcDurationMs": 28.96,
"layouts": 1,
"layoutDurationMs": 0.18999999999999995,
"taskDurationMs": 446.69499999999994,
"heapDeltaBytes": -1316604
},
{
"name": "canvas-mouse-sweep",
"durationMs": 2122.6179999999886,
"styleRecalcs": 190,
"styleRecalcDurationMs": 63.038999999999994,
"layouts": 12,
"layoutDurationMs": 4.186999999999999,
"taskDurationMs": 1165.519,
"heapDeltaBytes": -1894380
},
{
"name": "dom-widget-clipping",
"durationMs": 571.5250000000083,
"styleRecalcs": 40,
"styleRecalcDurationMs": 12.417,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 362.076,
"heapDeltaBytes": 7551836
},
{
"name": "subgraph-dom-widget-clipping",
"durationMs": 645.5500000000143,
"styleRecalcs": 78,
"styleRecalcDurationMs": 22.455999999999996,
"layouts": 1,
"layoutDurationMs": 0.18600000000000008,
"taskDurationMs": 462.734,
"heapDeltaBytes": -8635136
},
{
"name": "subgraph-idle",
"durationMs": 2008.1380000000308,
"styleRecalcs": 121,
"styleRecalcDurationMs": 22.8,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 412.01500000000004,
"heapDeltaBytes": -2113244
},
{
"name": "subgraph-mouse-sweep",
"durationMs": 2027.1510000000035,
"styleRecalcs": 174,
"styleRecalcDurationMs": 62.36899999999999,
"layouts": 16,
"layoutDurationMs": 5.146,
"taskDurationMs": 1034.519,
"heapDeltaBytes": -3240492
}
]
} |
comfy-pr-bot
requested review from
Myestery,
comfyui-wiki,
jtydhr88,
ltdrdata,
pythongosssss and
viva-jinyi
as code owners
dosubot
bot
added
size:L
christian-byrne
force-pushed
the
ci/tailwind-v4-linter-re-enable
branch
from
c7d09d0 to
7d62603
Compare
dosubot
bot
added
size:S
christian-byrne
force-pushed
the
ci/tailwind-v4-linter-re-enable
branch
from
e914794 to
349a32b
Compare
dosubot
bot
added
size:M
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
eslint.config.ts (1)
132-134: Consider enablingenforce-canonical-classesandno-deprecated-classesas warnings.Per the PR summary, ~700 issues from these rules are auto-fixable via
eslint --fix. Rather than keeping them'off', you could set them to'warn'so developers see the deprecation notices during development, while still passing CI. This provides visibility without blocking merges.- 'better-tailwindcss/enforce-canonical-classes': 'off', - // Off: large batch change, enable and apply with `eslint --fix` - 'better-tailwindcss/no-deprecated-classes': 'off' + // Warn: large batch change (v3→v4 renames), auto-fixable with `eslint --fix` + 'better-tailwindcss/enforce-canonical-classes': 'warn', + // Warn: large batch change, auto-fixable with `eslint --fix` + 'better-tailwindcss/no-deprecated-classes': 'warn'Alternatively, if ~700 warnings would be too noisy, keeping them
'off'until a dedicated cleanup PR is reasonable.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@eslint.config.ts` around lines 132 - 134, Change the two Better Tailwind CSS rules in eslint.config.ts—'better-tailwindcss/enforce-canonical-classes' and 'better-tailwindcss/no-deprecated-classes'—from 'off' to 'warn' so developers see deprecation notices during development without failing CI; if the ~700 auto-fixable warnings are too noisy, keep them 'off' for now but add a TODO comment and create a follow-up cleanup PR that runs `eslint --fix` to apply fixes and then flip both rules to 'warn' (or 'error' after cleanup).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@eslint.config.ts`:
- Around line 132-134: Change the two Better Tailwind CSS rules in
eslint.config.ts—'better-tailwindcss/enforce-canonical-classes' and
'better-tailwindcss/no-deprecated-classes'—from 'off' to 'warn' so developers
see deprecation notices during development without failing CI; if the ~700
auto-fixable warnings are too noisy, keep them 'off' for now but add a TODO
comment and create a follow-up cleanup PR that runs `eslint --fix` to apply
fixes and then flip both rules to 'warn' (or 'error' after cleanup).
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
eslint.config.tspackage.jsonpnpm-workspace.yamlsrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/topbar/CurrentUserButton.vuesrc/components/widget/nav/NavTitle.vuesrc/renderer/extensions/vueNodes/composables/useNodeTooltips.tssrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vuesrc/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts
✅ Files skipped from review due to trivial changes (1)
- src/components/widget/nav/NavTitle.vue
🚧 Files skipped from review as they are similar to previous changes (1)
- package.json
- Install eslint-plugin-better-tailwindcss with recommended config - Configure entryPoint to design-system CSS for v4 theme resolution - Enable: enforce-canonical-classes, no-deprecated-classes, no-conflicting-classes, no-duplicate-classes, no-unnecessary-whitespace - Disable initially: no-unknown-classes (needs class whitelisting), enforce-consistent-line-wrapping (oxfmt conflict risk), enforce-consistent-class-order (large batch change) - Fix conflicting outline classes in FormDropdownMenuActions Fixes COM-15518 Amp-Thread-ID: https://ampcode.com/threads/T-019c9935-71bc-7193-b0a4-18c7c40249c3
christian-byrne
force-pushed
the
ci/tailwind-v4-linter-re-enable
branch
from
cacb119 to
d6c007f
Compare
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
eslint.config.ts (1)
130-135: Preferwarnoverofffor canonical/deprecated rules during migration.Lines 132 and 134 disable both rules entirely, which removes visibility of new violations during the migration window. Since the lint script does not fail on warnings, switching to
warnpreserves guardrails and allows the team to see new violations landing while planning the cleanup PR.Suggested config tweak
- 'better-tailwindcss/enforce-canonical-classes': 'off', + 'better-tailwindcss/enforce-canonical-classes': 'warn', ... - 'better-tailwindcss/no-deprecated-classes': 'off' + 'better-tailwindcss/no-deprecated-classes': 'warn'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@eslint.config.ts` around lines 130 - 135, Change the two Tailwind rule settings from 'off' to 'warn' so violations are surfaced during migration: update the entries for 'better-tailwindcss/enforce-canonical-classes' and 'better-tailwindcss/no-deprecated-classes' in eslint.config.ts to use 'warn' instead of 'off' to preserve visibility without failing CI.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@eslint.config.ts`:
- Around line 130-135: Change the two Tailwind rule settings from 'off' to
'warn' so violations are surfaced during migration: update the entries for
'better-tailwindcss/enforce-canonical-classes' and
'better-tailwindcss/no-deprecated-classes' in eslint.config.ts to use 'warn'
instead of 'off' to preserve visibility without failing CI.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
eslint.config.tspackage.jsonpnpm-workspace.yamlsrc/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
🚧 Files skipped from review as they are similar to previous changes (2)
- package.json
- src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
Contributor
Author
|
This is working on Ubuntu for me now, seems safe to add back. |
5 tasks
DrJKL
reviewed
Mar 4, 2026
|
|
||
| const actionButtonStyle = cn( | ||
| 'h-8 bg-zinc-500/20 rounded-lg outline outline-1 outline-offset-[-1px] outline-node-component-border transition-all duration-150' | ||
| 'h-8 bg-zinc-500/20 rounded-lg outline-1 -outline-offset-1 outline-node-component-border transition-all duration-150' |
Contributor
There was a problem hiding this comment.
I would have expected -1 to be 4px and -px to be 1px
DrJKL
reviewed
Mar 4, 2026
Contributor
There was a problem hiding this comment.
Might be able to reduce the changes here with a pnpm dedupe
Contributor
Author
There was a problem hiding this comment.
@coderabbitai make an Issue to try this out later.
Contributor
There was a problem hiding this comment.
Oops, something went wrong! Please try again later. 🐰 💔
DrJKL
approved these changes
Mar 4, 2026
Myestery
pushed a commit
that referenced
this pull request
Mar 5, 2026
…9245) ## Summary Add `eslint-plugin-better-tailwindcss` to the ESLint toolchain for Tailwind CSS v4 class linting. ## Changes - **What**: Integrate `eslint-plugin-better-tailwindcss` (v4.3.1) with the recommended config, pointed at the design-system CSS entry point for v4 theme resolution. Five rules are enabled initially: `enforce-canonical-classes`, `no-deprecated-classes`, `no-conflicting-classes`, `no-duplicate-classes`, `no-unnecessary-whitespace`. Three rules are disabled pending follow-up: `no-unknown-classes` (needs PrimeIcon/custom class whitelisting), `enforce-consistent-line-wrapping` (oxfmt conflict risk), `enforce-consistent-class-order` (large batch change). - **Dependencies**: `eslint-plugin-better-tailwindcss` ^4.3.1 - Fix conflicting `outline outline-1` classes in `FormDropdownMenuActions.vue` (caught by the new `no-conflicting-classes` rule). ## Review Focus - Is the rule severity/enablement strategy appropriate for incremental adoption? - The 700 warnings (mostly `enforce-canonical-classes` and `no-deprecated-classes`) are all auto-fixable via `eslint --fix` — should we batch-fix them in this PR or a follow-up? Fixes COM-15518 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9245-feat-add-eslint-plugin-better-tailwindcss-for-Tailwind-v4-linting-3136d73d365081df8a64dd55962d073f) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add
eslint-plugin-better-tailwindcssto the ESLint toolchain for Tailwind CSS v4 class linting.Changes
eslint-plugin-better-tailwindcss(v4.3.1) with the recommended config, pointed at the design-system CSS entry point for v4 theme resolution. Five rules are enabled initially:enforce-canonical-classes,no-deprecated-classes,no-conflicting-classes,no-duplicate-classes,no-unnecessary-whitespace. Three rules are disabled pending follow-up:no-unknown-classes(needs PrimeIcon/custom class whitelisting),enforce-consistent-line-wrapping(oxfmt conflict risk),enforce-consistent-class-order(large batch change).eslint-plugin-better-tailwindcss^4.3.1outline outline-1classes inFormDropdownMenuActions.vue(caught by the newno-conflicting-classesrule).Review Focus
enforce-canonical-classesandno-deprecated-classes) are all auto-fixable viaeslint --fix— should we batch-fix them in this PR or a follow-up?Fixes COM-15518
┆Issue is synchronized with this Notion page by Unito