Comfy-Org / Comfy-Org/ComfyUI_frontend

feat(lint): add linter rule to enforce Tailwind scale utilities over arbitrary pixel values (e.g., text-[28px] → text-3xl)

Open
#10,272 0 comments 0 reactions 1 assignee Claimed by @christian-byrne View on GitHub
developer experience
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Summary

Add a linter rule that flags arbitrary Tailwind CSS value syntax (e.g., `text-[28px]`, `w-[32px]`) when an equivalent Tailwind scale utility exists (e.g., `text-3xl`, `w-8`).

## Motivation

Identified during review of PR #9901 (comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9901#discussion_r2955799941), where `text-[32px]` was changed to `text-[28px]` — both are arbitrary values where Tailwind utilities should be preferred.

Enforcing this at the linter level (rather than in individual PRs) will consistently prevent arbitrary `-[npx]` usage across the codebase when a first-class Tailwind unit is available.

## Proposed solution

- Investigate whether `better-tailwindcss` (already used in this repo) provides such a rule, or configure an existing rule (e.g., `no-arbitrary-value` or equivalent).
- If no existing rule covers this case, add a custom ESLint or stylelint rule that:
- Detects Tailwind classes using `-[px]` (or other arbitrary length units).
- Checks if a canonical Tailwind utility maps to that value.
- Reports and optionally auto-fixes to the canonical class.
- Apply the rule across all `.vue`, `.ts`, and `.tsx` files.

## References

- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9901
- Comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9901#discussion_r2955799941
- Requested by: @christian-byrne

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-10272-feat-lint-add-linter-rule-to-enforce-Tailwind-scale-utilities-over-arbitrary-pixel--3276d73d36508104ab0cfd217719ea2d) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.