[BUG] Custom classes are not sorted

[Binero]

Describe the bug I created some custom classes in my tailwind.config.cjs. These classes are sorted with the tailwindcss prettier plugin, but eslint ignores them and always puts them in front. It does recognise them, as it does not emit any tailwindcss/no-custom-classname for them.

To Reproduce

<div class="mb-6 border-solid border-green-600 p-2 max-lg:shadow-15-60 lg:float-right lg:ml-6 lg:w-48 lg:border-2 lg:bg-slate-100 lg:text-xs">
</div>

Snippet from package.json:

{
    "eslintConfig": {
        "extends": [
            "eslint:recommended",
            "prettier",
            "plugin:astro/recommended",
            "plugin:mdx/recommended",
            "plugin:tailwindcss/recommended"
        ],
        "parserOptions": {
            "ecmaVersion": "latest"
        },
        "rules": {
            "tailwindcss/no-custom-classname": [
                1,
                {
                    "config": "tailwind.config.cjs"
                }
            ]
        },
        "overrides": [
            {
                "files": "*.mdx",
                "extends": [
                    "plugin:mdx/overrides"
                ],
                "rules": {
                    "no-unused-vars": "off",
                    "no-undef": "off",
                    "import/no-unresolved": "off"
                }
            }
        ]
    },
    "prettier": {
        "printWidth": 120,
        "tabWidth": 4,
        "plugins": [
            "prettier-plugin-astro",
            "prettier-plugin-tailwindcss"
        ],
        "pluginSearchDirs": false,
        "tailwindConfig": "tailwind.config.cjs"
    }
}

Sorting according to eslint:

max-lg:shadow-15-60 mb-6 border-solid border-green-600 p-2 lg:float-right lg:ml-6 lg:w-48 lg:border-2 lg:bg-slate-100 lg:text-xs

Sorting according to prettier:

mb-6 border-solid border-green-600 p-2 max-lg:shadow-15-60 lg:float-right lg:ml-6 lg:w-48 lg:border-2 lg:bg-slate-100 lg:text-xs

Expected behavior I'd expect ESLint to use the same sorting as the official prettier plugin.

Environment:

• OS: Linux
• yarn 1.22.19
• node 19.8.1
• eslint-plugin-tailwindcss 3.10.3
• prettier-plugin-tailwindcss 0.2.6
• tailwindcss 3.3.1
• eslint 8.37.0

[francoismassart]

@Binero I guess you defined the custom class shadow-15-60 in your tw config ? as well as an additional max-lg entry in screens

[Binero]

I did, as well as many others. It doesn't recognise any of them.

Snippet, for brevity:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
        extend: {
            spacing: {
                '34': '8.75rem',
                '84': '21rem',
            },
            dropShadow: {
                '15-100': '0 0 15px rgba(0, 0, 0, 1)',
                '10-100': '0 0 10px rgba(0, 0, 0, 1)',
                '05-60': '2px 2px 0.5px rgba(0, 0, 0, 0.6)',
                '05-100': '5px 5px 10px rgba(0, 0, 0, 0.4)',
            },
            boxShadow: {
                '15-60': '0 5px 10px rgba(0, 0, 0, 0.4)',
                'vignette': 'inset 0px 0px 200px -10px rgba(0, 0, 0, 0.5)',
            },
            maxWidth: {
                '2xs': '16rem',
                '2.5xs': '14rem',
                '3xs': '12rem',
                '4xs': '8rem',
                '5xs': '4rem',
            },
}}}

[StasNemy]

@Binero try to add this to eslintConfig

settings: {
  tailwindcss: {}
},

[SanderCokart]

I have the exact same issue!

[shikarev]

Works for me

tailwindcss: {
      ...
      // Need to use path, because default doesn't see custom className
      config: path.join(__dirname, './tailwind.config.js'),
    },