Sorting of extended/new attributes

[giovannialo]

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

v0.5.7

What version of Tailwind CSS are you using?

v3.3.5

What version of Node.js are you using?

v18.16.1

What package manager are you using?

npm

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/4hYmtn5TfP

Describe your issue

I extended the 'opacity' property, adding a value of 1 as 0.01. For extended/new attributes, the sorting behavior is lost. Such attributes are sorted to the beginning of the classes. Example:

bg-indigo-500 text-white hover:bg-indigo-700/50 active:bg-indigo-700/1

is turning into this:

active:bg-indigo-700/1 bg-indigo-500 text-white hover:bg-indigo-700/50

[adamwathan]

Hey! I can't seem to reproduce this, when I hit "Tidy" in your Play it sorts the class to the expected spot:

https://play.tailwindcss.com/LSPD7Mt137

[giovannialo]

Interesting. There are times when it happens and others when it doesn't. Maybe it's not compiling the new styles, that's why it's defaulting to the first one.

Indeed, it seems there are no problems. Sorry for the misunderstanding.

By the way, I'm not sure if I can still jump in on this issue, but if not, that's okay.

I created an app with SvelteKit + Prettier using the npm create svelte@latest app command and am using the JetBrains IDE (WebStorm), with the IDE's automatic configuration to run Prettier when saving the file.

In development mode with npm run dev, the CSS is recompiled with each new change and code save, but this recompilation process causes the IDE to not recognize the new properties that are added to tailwind.config.js in time to order the classes correctly, causing the new properties to be pushed to the beginning of the classes.

The configuration in the .prettierrrc file is as follows:

{
    "useTabs": false,
    "singleQuote": true,
    "trailingComma": "none",
    "printWidth": 120,
    "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
    "overrides": [
        {
            "files": "*.svelte",
            "options": {
                "parser": "svelte"
            }
        }
    ]
}

Do you have any knowledge to tell me if it's possible to apply some kind of configuration to solve this 'problem'?

If I run the prettier --write . command in the terminal, the classes are ordered correctly, but the same does not happen with the IDE's automatic save.

[thecrypticace]

The prettier plugin loads the tailwind config itself — there can be a small delay in when you change the config to when it's picked up when in an IDE setting (should be no more than 10 seconds).

This is because we have a cache that keeps the config around based on it's path for about 10 seconds — this significantly speeds up processing so we're not reloading the config for every file — or in the case of languages like Svelte — for every expression in the file.

Could that be what you're seeing @giovannialo? The compiled CSS should not have any affect on it at all — only the content of the file you're editing and your config file.

[hugotox]

I have the same issue as @giovannialo but on VSCode.
Running prettier --write command sorts the classes in a certain way, VSCode on save formats it in a different way.

Example, I have a custom class .bg-muted (from shadcn-svelte) and VSCode puts it before other classes:

<button class="bg-muted flex">Test</button>

Running the prettier command line changes that to:

<button class="flex bg-muted">Test</button>

Which I believe is the correct output, because if I change the custom class to a default tw class like bg-red-500, both methods produce the same output.

[thecrypticace]

@hugotox can you provide a reproduction? And are you using pnpm? The vscode extension has known issues with it.

[hugotox]

@hugotox can you provide a reproduction? And are you using pnpm? The vscode extension has known issues with it.

I'm using npm. Might be an issue with vscode, prettier and monorepos. On a fresh installation of sveltekit, tailwind and shadcn this issue doesn't happen 😭

[mcmxcdev]

We are also encountering this issue currently and wondering if there is any workaround for now.

TailwindCSS extension formatting in VSCode:
dark:bg-gray-2.5 h-fit w-fit bg-gray-6

Prettier plugin with prettier-plugin-tailwindcss:
h-fit w-fit bg-gray-6 dark:bg-gray-2.5

Happens on a SvelteKit project using pnpm.

[seawatts]

@mcmxcdev I just started seeing that today as well. I'm not sure what happened.

[theovier]

Since the update to tailwind 3.4.0 I'm experiencing a similar issue as @mcmxcdev (within IntelliJ using Yarn) with the prettier-plugin-tailwindcss 0.5.9.

For example these classes will be sorted differently with the same prettier configuration.

<div class="xl:px-4 dark:bg-gray-800" />

My on-save prettier will sort it

<div class="dark:bg-gray-800 xl:px-4" />

but running prettier:fix will result in

<div class="xl:px-4 dark:bg-gray-800" />

This just started to happen with the update to 3.4.0

(If you prefer me to open a separate issue for this because of the higher tailwind version, I'll be happy to)

[hyunbinseo]

Installing the pre-release version of the Tailwind CSS IntelliSense extension seems to fix the issue.

A button is shown when opened from the VS Code extension panel.

[DaLukasDev]

Can confirm I have the same issue as @theovier describes (xl:... get sorted differently with CLI vs VSCode extension).
Only I'm using PNPM and VSCode (updating to the pre-release version of Tailwind CSS IntelliSense did not help in my case).
I could try to make a repo if that would help.

[seawatts]

I'm seeing the same issue as @DaLukasDev I've updated the VSCode extension to the pre release, and I'm still getting the issue.

[stabildev]

Switchting to the pre-release version of IntelliSense resolved my issue where eslint with the prettier plugin sorted custom classes differently from vs code

Edit: in conjunction with reloading the window after defining them in tailwind.config.ts

[hugotox]

Switching to the pre-release version of IntelliSense didn't work for me

[mybearworld]

The IntelliSense plugin needs a VSCode reload in order to get the new Tailwind config. Getting the pre-release only works because you need to reload to get it. It seems unrelated to actually getting the pre-release itself.

[orjerby]

It happens to me too.
It fixes itself only when i do File -> Close Folder and opens the project again.

I use:
"prettier": "^3.2.4",
"prettier-plugin-tailwindcss": "^0.5.11",
"tailwindcss": "^3.4.1",

[coryvirok]

I was able to solve this by setting the default formatter to esbenp.prettier-vscode. Since I'm writing my tailwindcss in .svelte files, the svelte extension was controlling formatting and was causing TW classes to have a different order vs running prettier --write.

FWIW - I found the solution by right clicking on the .svelte file and selecting "format document with" and then seeing that Svelte was the default formatter but Prettier was an option.

Relevant VSCode settings:

// Without this, the official Svelte extension was selected as the formatter.
// But since .prettierrc has the Svelte plugin configured, we can just use Prettier.
"[svelte]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

.prettierrc

{
  "useTabs": false,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSameLine": true,
  "arrowParens": "always",
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
  "overrides": [
    {
      "files": "*.svelte",
      "options": {
        "parser": "svelte"
      }
    }
  ]
}

[hugotox]

@coryvirok esbenp.prettier-vscode doesn't format .svelte files for me. Do you have other extensions in vscode?

[coryvirok]

It should format svelte if you have the prettier-plugin-svelte installed. The only other relevant extension I have is svelte.svelte-vscode which is the default formatter for svelte if you don't override it, (like I did.)

If you're using a monorepo, you might need to explicitly set your prettier config. Eg.

{
  "svelte.enable-ts-plugin": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.configPath": "./apps/web/.prettierrc",
  "[svelte]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

[mybearworld]

This is, however, not a solution for Vue, HTML or JS, where Prettier has built-in support for them and esbenp.prettier-vscode is already the default.

[coryvirok]

@coryvirok esbenp.prettier-vscode doesn't format .svelte files for me. Do you have other extensions in vscode?

This might be the missing piece. I removed it from my original config and it caused my setup to complain about Prettier not being able to format Svelte files.

  "prettier.documentSelectors": ["**/*.svelte"],

full workspace config

{
  "svelte.enable-ts-plugin": true,
  "eslint.validate": ["javascript", "typescript", "svelte"],
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.configPath": "./apps/web/.prettierrc",
  "prettier.documentSelectors": ["**/*.svelte"],
  "[svelte]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.enableDebugLogs": true,
}

.prettierrc

{
  "useTabs": false,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSameLine": true,
  "arrowParens": "always",
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
  "overrides": [
    {
      "files": "*.svelte",
      "options": {
        "parser": "svelte"
      }
    }
  ]
}

.eslintrc.cjs

/** @type { import("eslint").Linter.Config } */
module.exports = {
  root: true,
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:svelte/recommended',
    'plugin:svelte/prettier',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    extraFileExtensions: ['.svelte'],
  },
  env: {
    browser: true,
    es2017: true,
    node: true,
  },
  overrides: [
    {
      files: ['*.svelte'],
      parser: 'svelte-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser',
      },
    },

    {
      files: ['src/lib/components/ui/**/*.svelte'],
      rules: {
        '@typescript-eslint/no-unused-vars': 'warn',
      },
    },
  ],
}

[hugotox]

@coryvirok : thank you. This have fixed my issue in vscode. Like you said, the key was in the settings

"[svelte]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.documentSelectors": ["**/*.svelte"]

[eyalch]

I was experiencing the same issue that was described here: the Prettier CLI formats classes in the correct order while the IDE, WebStorm in my case, does not (putting all custom class in the beginning).

For some reason, restarting the IDE resolved the issue and now WebStorm produces the same output as the Prettier CLI.

[eyalch]

Update:

After modifying tailwind.config.js, the IDE is again not formatting classes correctly. As before, another restart to the IDE resolved the issue.

There's probably some aggressive caching going on, either in the IDE itself or in the Prettier plugin.

[MrOxMasTer]

the situation is very similar with custom classes. Media requests are not sorted at the beginning/ are not sent from the end and are not sorted

[hdodov]

I can confirm what @MrOxMasTer says. I have custom classes with addVariant():

const config = {
  plugins: [
    {
      handler({ addVariant }) {
        addVariant("nl", '[data-nav-theme="light"] &');
        addVariant("nd", '[data-nav-theme="dark"] &');
      },
    },
  ],
};

…so I have classes like nd:bg-white and nl:bg-black. However, they get sorted at the start until I run the "Developer: Reload Window" command in VS Code. After that, they get sorted as expected.

Versions:

• prettier 3.3.3
• prettier-plugin-tailwindcss 0.6.6
• @trivago/prettier-plugin-sort-imports 4.3.0
• Prettier - Code formatter v11.0.0
• Tailwind CSS IntelliSense v0.12.11

[tsykin]

for me the issue was in eslintrc.json (i had tailwind as a plugin instead of extends)

eslintrc.json

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint"],
  "rules": {
    "prettier/prettier": "error"
  }
}

.prettierrc.json

{
  "singleQuote": true,
  "jsxSingleQuote": false,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "printWidth": 80,
  "arrowParens": "always",
  "endOfLine": "auto",
  "plugins": ["prettier-plugin-tailwindcss"]
}