vscode prettier formatter doesn't match npx prettier

[arishoham]

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

v0.5.14

What version of Tailwind CSS are you using?

v3.3.0

What version of Node.js are you using?

v20.12

What package manager are you using?

yarn

What operating system are you using?

Mac OS

Describe your issue

I use the classes below:

className="data-[side=top]:animate-test flex"

and in my tailwind.config.ts

const config = {
  theme: {
    extend: {
      animation: {
        test: 'FadeIn 400ms cubic-bezier(0.16, 1, 0.3, 1)',
         }
      }
   }
}

and my .prettierrc.js:

module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
  tailwindFunctions: ['cn'],
  tailwindConfig: './tailwind.config.ts',
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2,
};

When i run npx prettier --write it sorts the classes in a different order then when i use the prettier formatter in vscode (option + shift + f)

[branoben]

I think this has already been fixed in Tailwind 3.4.2 (#246)

[sdanialraza]

I think this has already been fixed in Tailwind 3.4.2 (#246)

I can reproduce this issue on Tailwind 3.4.3

[joiglifberg]

Same for me with the new whitespace removal using the following versions:

[email protected]
[email protected]

[thecrypticace]

@arishoham can you provide a reproduction repo I can clone?

[mikhail-karan]

Experiencing the same thing in my SvelteKit project

[aaronadamsCA]

I am having the same issue with Tailwind v4.0.0-alpha.16.

This does not seem to be the same issue as #246, because I am seeing a mismatch between single-file CLI runs vs. the extension.

If first format a single file using the CLI (pnpm exec prettier --write [file]), then format the same file again using VS Code, I get these two different results:

-      <div className="max-w-screen-lg mx-auto flex flex-col gap-12 py-6 px-4">
+      <div className="mx-auto flex max-w-screen-lg flex-col gap-12 px-4 py-6">

At first I thought it had to do with the fact that in v4 I need to self-define --width-screen-lg: var(--breakpoint-lg) in my tailwind.css, but that doesn't explain how px-4 and py-6 are also getting switched around.

The extension output looks good to me:

["INFO" - 8:22:40 PM] Extension Name: esbenp.prettier-vscode.
["INFO" - 8:22:40 PM] Extension Version: 10.4.0.
["INFO" - 8:22:40 PM] Using config file at /workspaces/web-apps/.prettierrc.json
["INFO" - 8:22:47 PM] Using config file at /workspaces/web-apps/.prettierrc.json
["INFO" - 8:22:59 PM] Formatting file:///workspaces/web-apps/apps/myapp/app/routes/myroute._index/MyComponent.tsx
["INFO" - 8:22:59 PM] Using config file at /workspaces/web-apps/.prettierrc.json
["INFO" - 8:22:59 PM] PrettierInstance:
{
  "modulePath": "/workspaces/web-apps/node_modules/prettier/index.cjs",
  "importResolver": {},
  "callMethodResolvers": {},
  "currentCallMethodId": 5,
  "version": "3.3.2"
}
["INFO" - 8:22:59 PM] Using ignore file (if present) at /workspaces/web-apps/.prettierignore
["INFO" - 8:22:59 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 8:22:59 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 8:22:59 PM] Prettier Options:
{
  "filepath": "/workspaces/web-apps/apps/myapp/app/routes/myroute._index/MyComponent.tsx",
  "parser": "typescript",
  "plugins": [
    "/workspaces/web-apps/node_modules/.pnpm/[email protected][email protected]/node_modules/prettier-plugin-jsdoc/dist/index.js",
    "/workspaces/web-apps/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/prettier-plugin-tailwindcss/dist/index.mjs"
  ]
}
["INFO" - 8:22:59 PM] Formatting completed in 200ms.

I can't create a self-contained reproduction right now, but I can give it a shot later if nobody else has time.

[zowebs]

I am having the same issue with Tailwind v4.0.0-alpha.16.

This does not seem to be the same issue as #246, because I am seeing a mismatch between single-file CLI runs vs. the extension.

If first format a single file using the CLI (pnpm exec prettier --write [file]), then format the same file again using VS Code, I get these two different results:

-      <div className="max-w-screen-lg mx-auto flex flex-col gap-12 py-6 px-4">
+      <div className="mx-auto flex max-w-screen-lg flex-col gap-12 px-4 py-6">

At first I thought it had to do with the fact that in v4 I need to self-define --width-screen-lg: var(--breakpoint-lg) in my tailwind.css, but that doesn't explain how px-4 and py-6 are also getting switched around.

The extension output looks good to me:

I can't create a self-contained reproduction right now, but I can give it a shot later if nobody else has time.

I have the same issue:

• [email protected]
• [email protected]
• VS code TW extension version: 0.10.5

[Benjythebee]

Could this be an issue with OS?

I noted that at my workplace, people with macOS don't have classes being sorted while others with Windows, it does;

[zowebs]

Could this be an issue with OS?

I noted that at my workplace, people with macOS don't have classes being sorted while others with Windows, it does;

Happens to me on both, macOS & windows

[gregberge]

The problem is that the Tailwind CSS config is not found correctly. To fix it use an absolute path:

Example of Prettier config that works

// prettier.config.mjs
import { dirname, resolve } from 'path';
import { fileURLToPath } from 'url';

const __dirname = dirname(fileURLToPath(import.meta.url));

export default {
    plugins: ['prettier-plugin-tailwindcss'],
    tailwindConfig: resolve(__dirname, './tailwind/tailwind.config.js'),
    tailwindFunctions: ['clsx', 'tw'],
};

[thecrypticace]

Could this be an issue with OS?
I noted that at my workplace, people with macOS don't have classes being sorted while others with Windows, it does;

Happens to me on both, macOS & windows

What package manager are you using? And do you have an example project that you can provide that you see this on?

[aaronadamsCA]

@thecrypticace Here is a minimal reproduction + screen recording using Tailwind v4 alpha:

https://github.com/aaronadamsCA/prettier-plugin-tailwindcss-issue-270

My best guess at what's happening:

• CLI formatting detects the Tailwind config at my-app/src/tailwind.css, so it uses the Tailwind v4 sort order.
• IDE formatting doesn't detect the Tailwind config, so it falls back to the plugin's built-in sort order, which is different.

One workaround is cp .prettierrc.json my-app/, but obviously we'd rather not copy/link our Prettier config into every package.

I realize this is v4 and most other reports are v3, but I have a feeling the root cause is ultimately the same—incompatible config file resolution.

[aaronadamsCA]

I've got an update to report, and it's a good-news-bad-news situation.

The good news is that in our codebase, at some point between Tailwind 4.0.0-alpha.19 and 4.0.0-alpha.24, this plugin started returning consistent results between Prettier CLI runs and Visual Studio Code runs.

The bad news is now both are incorrect. 🙃

For example, the plugin is incorrectly moving data attrributes to the front because it doesn't recognize them:

-<button class="outline-none data-focus:outline-blue-500">Button</button>
+<button class="data-focus:outline-blue-500 outline-none">Button</button>

This may eventually come down to incorrect configuration, but if that's the case, I wonder if the plugin should refuse to run instead of applying an incorrect sort order.