-
-
Notifications
You must be signed in to change notification settings - Fork 97
Description
Is your feature request related to a problem? Please describe.
When using TailwindCSS, my teammates and I often end up with multiple spaces in the list of classes:
<div className=" flex w-full space-x-4 items-center ">...</div>
When we apply autofix (tailwindcss/classnames-order
), class names are reordered but extra spaces between them are not removed:
<div className=" flex w-full items-center space-x-4 ">...</div>
Describe the solution you'd like
I understand that certain teams might want to keep the original spacing, e.g. when someone wants to align class names of different width. However, it’d be great to have an option to auto-remove them:
<div className="flex w-full items-center space-x-4">...</div>
How about a new rule, say, tailwind/whitespace
?
Describe alternatives you've considered
I looked around for potential ESLint rules in other plugins but could not find anything that would cover this case. Even if there exists something for className="..."
outside eslint-plugin-tailwindcss
, that solution would not be ideal. Spaces should be removed from all TailwindCSS-related strings, e.g. inside cn()
and other configured functions. So it feels like this rule does belong to this plugin.
Additional context
See #1, which is the original feature request for this behavior. The issue was fixed in 46717c8 but was then discontinued in #126. You can tell this by the removal of a relevant test case.