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