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:

tailwindcss@3.4.3
prettier-plugin-tailwindcss@0.6.1

[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/prettier-plugin-jsdoc@1.3.0_prettier@3.3.2/node_modules/prettier-plugin-jsdoc/dist/index.js",
    "/workspaces/web-apps/node_modules/.pnpm/prettier-plugin-tailwindcss@0.6.3_prettier-plugin-jsdoc@1.3.0_prettier@3.3.2__prettier@3.3.2/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:

• tailwindcss@3.4.4
• prettier-plugin-tailwindcss@0.5.14
• 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?