[BUG] font size CSS classes wrong order

[clementgalidie]

Describe the bug
When using font sizing classes with breakpoint modifiers (:sm, :md and son on), the plugin does not fix the ordering: classes stay in the wrong order.

To Reproduce
The tailwind.options.js of the project has the following rule:

fontSize: {
    'size-10': '.625rem',
    'size-12': '.75rem',
    'size-14': '.875rem',
    'size-16': '1rem',
    'size-18': '1.125rem',
    'size-20': '1.25rem',
    'size-22': '1.375rem',
    'size-24': '1.5rem',
    'size-26': '1.625rem',
    'size-28': '1.75rem',
    'size-32': '2rem',
    'size-36': '2.25rem',
    'size-44': '2.75rem',
    'size-56': '3.5rem',
},

If I type this and save the file (ESLint is configured to fix all the issues while saving)

<p class="md:text-size-12 lg:text-size-10 sm:text-size-14">
    hello
</p>

I end up with the same thing as above instead of:

<p class="sm:text-size-14 md:text-size-12 lg:text-size-10">
    hello
</p>

Expected behavior
The expected behavior should be:

<p class="sm:text-size-14 md:text-size-12 lg:text-size-10">
    hello
</p>

Environment:

• OS: macOS Big Sur 11.4
• Softwares + version used:
  • Node v14.17.4
  • npm 6.14.14
  • tailwindcss 3.0.*
  • eslint-plugin-tailwindcss ^3.6.1

partial eslint config

module.exports = {
    // ...
    plugins: ['tailwindcss'],
    extends: [
        // ...
        'plugin:tailwindcss/recommended',
    ],
    rules: {
        // ...
        'tailwindcss/no-custom-classname': 'off',
    },
};

If you have any idea regarding that issue, feel free to share it. :)

[clementgalidie]

I thought it could be related to the fact that the font-size classes were neither part of the default Tailwind's configuration nor extented.
I created a small project with vue cli and added the same font-size custom classes (overriding the default ones).
When fixing the code with ESLint, the result is as intended:

<p class="md:text-size-12 lg:text-size-10 sm:text-size-14">…</p>

then:

<p class="sm:text-size-14 md:text-size-12 lg:text-size-10">…</p>

[francoismassart]

@clementgalidie

I just published a new beta version which should support Tailwind CSS up to 3.2.3 as well as fixed ordering for older Tailwind CSS version.

Could you try it out via:

1. npm i -D eslint-plugin-tailwindcss@3.7.0-beta.0
2. Test it on your own projects
3. Share your feedback in the comments ?

MR: #176

Thank you for your feedback

[francoismassart]

Version 3.7.0 has been released and it should fix the issue

npm i -D eslint-plugin-tailwindcss
or
npm i -D eslint-plugin-tailwindcss@3.7.0

If the issue persists, please open a new ticket.

Cheers.