tracking-tight order is causing issue

[web-programmer-here]

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

"prettier-plugin-tailwindcss": "0.5.5",

What version of Tailwind CSS are you using?

"tailwindcss": "3.3.3",

What version of Node.js are you using?

v18.12.1

What package manager are you using?

npm

What operating system are you using?

macOS

Describe your issue

I keep getting this error:

Replace `tracking-tight·flex-auto·text-2xl·font-bold` with `flex-auto·text-2xl·font-bold·tracking-tight`  prettier/prettier
Replace `tracking-tight·flex-auto·text-2xl·font-bold` with `flex-auto·text-2xl·font-bold·tracking-tight`  prettier/prettier

only happening with tracking-tight. Prettier VSCode auto formats the code by adding tracking-tight in the beginning but I get the other error.

[web-programmer-here]

also tracking-tighter order works, it is ordered like this:

flex-auto text-2xl font-bold tracking-tighter

[thecrypticace]

@web-programmer-here I can't reproduce this. Can you provide a reproduction. It sounds to me like different configs are being used inside VSCode versus the command line and whatever config is being loaded when using VSCode doesn't have tracking-tight defined (which it is by default so something would have to override the entire list of letter spacing values).

[web-programmer-here]

@thecrypticace thanks for the quick response, how can I find the root cause of this? seems to be only for tracking-tight

• I deleted my node_modules folder
• I deleted my nextjs cache folder
• I checked my tailwind config and there is no overwriting of the letter spacing.
• I checked VSCode prettier log and it says Using config file at 'my-project-folder/prettier.config.js'
• Prettier.config file has the following:

module.exports = {
plugins: ['prettier-plugin-tailwindcss'],
tailwindConfig: './tailwind.config.js',
 ...

[thecrypticace]

@web-programmer-here Chances are I'd probably have to look at the whole project.

You could, if you wanted, clone this repo, build a non-minified version of the plugin, pack it, and install it into your project so you can add console log statements where we do config loading.

That's basically what I'd end up doing if I didn't happen to notice anything else.

[MilesWuCode]

https://github.com/MilesWuCode/nuxt3-demo
path : components/Post/Card.vue

same issues ?

[thecrypticace]

@MilesWuCode Oh hmm it seems to be flip flopping (it was stable for a sec in VSCode but now it's not) which shouldn't be happening. I'll take a look.

[thecrypticace]

@web-programmer-here Hey there's a chance if you have a plugin or a layer that is adding a rule that includes tracking-tight alongside another class that it could be the cause. We've just merged a PR to fix that.

Once it is I'll post here and if you could give it a try and see if your issue is fixed? If it's not then it might be something else related to your project itself.

@MilesWuCode This was the source of the sorting bug in your project. As above I'll post once the insiders build is available to test.

The insiders build of Tailwind CSS should be available in about 15–20m.

Insiders builds can be installed via npm like so:

npm install tailwindcss@insiders

[thecrypticace]

Okay the insiders build is now available:

npm install tailwindcss@insiders

The version installed should be 0.0.0-insiders.ad66635.

[MilesWuCode]

Okay the insiders build is now available:

npm install tailwindcss@insiders

The version installed should be 0.0.0-insiders.ad66635.

working! thanks.