When I use custom styles in CSS/LESS files, formatting will make an error

[gwh18560]

What version of prettier-plugin-tailwindcss are you using?

v0.6.5

What version of Tailwind CSS are you using?

v3.4.1

What version of Node.js are you using?

v20.11.0

What package manager are you using?

pnpm

What operating system are you using?

Windows

Describe your issue

If i use the custom style in a css/less file, an error will occur once formatted. If i don't use ~“” to wrap the custom style ( @apply ~"tw-right-[20px]" ), there's no problem, but the custom style cannot take effect.

Before format

After format

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

[John-Gymly]

This also happens for any custom classes added to the tailwind config. Prettier is suggesting to put bg-scrim as the 1st class while the sorter places it last

[gurgeous]

I am seeing this as well with my custom color. For some reason the vscode prettier extension and prettier cli disagree on the class sorting. I am using [email protected] and [email protected]. Note that this ONLY happens with my custom color. If I change bg-paper to bg-red-500 the bug goes away.

Thanks guys, love this plugin and tailwind too!

vscode prettier extension

<div class="bg-paper fixed">

node_modules/.bin/prettier xxx.vue

<div class="fixed bg-paper">

[gwh18560]

I seem to have found a solution. Actually, i just need to make this plugin ineffective for some specific files.

.prettierrc

{
    "printWidth": 120,
    "tabWidth": 4,
    "singleQuote": true,
    "semi": true,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "bracketSameLine": true,
    "arrowParens": "always",
    "tailwindFunctions": ["cz", "classnames"],
    "plugins": ["prettier-plugin-tailwindcss"],
    "overrides": [{ "files": ["*.less", "*.css"], "options": { "plugins": [] } }]
}

[thecrypticace]

This will be fixed once 0.7.0 is out (aiming for some time next week but the release depends on a few more things). 👍