Multiple spaces in class attribute value

[francoismassart]

Multiple spaces are still present after applying the fixer

Before fixer:

className="space-y-5 sm:space-y-4 md:max-w-xl lg:max-w-3xl xl:max-w-none rtbf-ad rtbf-ad__container rtbd-ad__article-grid hidden-md hidden-lg js-ad js-ad-mmr   js-ad-hideable "

After fixer:

className="space-y-5 sm:space-y-4 md:max-w-xl lg:max-w-3xl xl:max-w-none rtbf-ad rtbf-ad__container rtbd-ad__article-grid hidden-md hidden-lg js-ad js-ad-mmr  js-ad-hideable"

[francoismassart]

FIXED in v1.0.3

[ferdicus]

Hi 👋🏿

I'm using your eslint-plugin within my setup and am very happy with it - I noticed, that the issue you mention in this ticket still does occur for me 😭

something like

className="flex        flex-row"

will be ignored.

It's also not kicking in, when the classname reorder applies (which I tried by switching flex and flex-row)

eslint-plugin version: "eslint-plugin-tailwindcss": "^3.6.0",
eslint version: "eslint": "^8.23.0",

setup in eslintrc

  extends: [
    'plugin:tailwindcss/recommended',
  ],
  rules: {
    'tailwindcss/classnames-order': 'error',
    'tailwindcss/migration-from-tailwind-2': 'off',
  }

Happy to provide more info if required

Thanks in advance 🙇🏿

[kachkaev]

Hmm I am still observing whitespace in the fixed JSX, even when classnames are reordered:

Before

<div className="    flex   w-full space-x-4      items-center ">...</div>

After

<div className="    flex   w-full items-center      space-x-4 ">...</div>

Expected

<div className="flex w-full items-center space-x-4 ">...</div>

How about a new autofixable rule, say, tailwind/whitespace?

[ferdicus]

@francoismassart, can we maybe re-open this ticket?

[kachkaev]

I have created #263 to help us track this feature request.