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)
- 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
Assessment
This issue has not been assessed yet.