[Feature request] Automatic whitespace removal

[kachkaev]

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 https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/1, which is the original feature request for this behavior. The issue was fixed in https://github.com/francoismassart/eslint-plugin-tailwindcss/commit/46717c895dd6a63c4835f55c3dddf192949f58c9 but was then discontinued in https://github.com/francoismassart/eslint-plugin-tailwindcss/pull/126. You can tell this by the removal of a relevant test case.

[kachkaev]

👋 @francoismassart! Would you be willing to a accept a PR for this?

[AndonMitev]

Hey please can we have this PR approved looks like common issue to put extra spaces in classNames

[manyuemeiquqi]

I think it's a good suggestion,i need it.

[stefanofa]

Any update on this?

[kachkaev]

Happy to try a PR if it has chances to get released. The latest commit on master was on Jun 27. I just want to make sure that the repo is actively maintained before investing time in a new rule. WDYT @francoismassart?

[ziyafenn]

Is there no progress on this? Would be a killer feature as tailwind intellisense extension stopped supporting this too.

[kachkaev]

👋 @francoismassart, congrats on a new release and thanks for merging #308! Glad that you’re still looking after this plugin.

WDYT of tailwind/whitespace as a new rule? I can try to create a PR if it has chances of getting released. This issue is the top-voted one at the moment:

[thenbe]

eslint-plugin-unocss has a similar rule (no-excessive-whitespaces) that can be used for inspiration.

[JacobZyy]

Is there no progress on this?

[kachkaev]

Automatic whitespace removal is supported in prettier-plugin-tailwindcss since v0.6.0:

• GitHub discussion (feature request)

• PR: https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/272

• Blog post:

  Cleaning up unnecessary whitespace
  When you’re copying around class names or deleting a class name from the middle of a list, it’s easy to end up with some extra whitespace that needs to be cleaned up. Now our Prettier plugin will handle this for you automatically, so you don’t need to clean it up yourself.

Hope to see this in eslint-plugin-tailwindcss too! Still happy to try a PR if @francoismassart is open to adding the rule. Waiting for his opinion.

[coderwyd]

This feature is very useful, it would be really nice to add this rule.

[maltsavkiryl]

Any update on this? :)

[kachkaev]

Waiting for green light from @francoismassart