Cannot seem to get sortTailwindcssClasses working in VSCode

[Swennet]

I cannot seem to get the Tailwindcss auto sorting working in VSCode. On save it does seem to use the prettier-plugin-blade package.

I'm testing this by juggling some Tailwind classes in my blade template into a random order. What am I doing wrong?

{
	"semi": true,
	"singleQuote": true,
	"trailingComma": "es5",
	"printWidth": 150,
	"useTabs": true,
	"tabWidth": 1,
	"plugins": ["@shufo/prettier-plugin-blade"],
	"overrides": [
		{
			"files": ["*.blade.php"],
			"options": {
				"parser": "blade",
				"printWidth": 999,
				"sortTailwindcssClasses": true,
				"wrapAttributes": "auto",
				"sortHtmlAttributes": "none",
				"noPhpSyntaxCheck": false
			}
		}
	]
}

Saving a .blade.php file

["INFO" - 3:47:23 PM] Prettier Options:
{
  "filepath": "/mypath/resources/views/vp-account-settings.blade.php",
  "parser": "blade",
  "useTabs": true,
  "tabWidth": 1,
  "endOfLine": "lf",
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 999,
  "plugins": [
    "/mypath/node_modules/@shufo/prettier-plugin-blade/dist/index.js"
  ],
  "sortTailwindcssClasses": true,
  "wrapAttributes": "auto",
  "sortHtmlAttributes": "none",
  "noPhpSyntaxCheck": false
}
["INFO" - 3:47:23 PM] Formatting completed in 139ms.```

[gdebrauwer]

I'm having the same issue

[shufo]

Thanks for creating the issue.
I'll look into it.

[gabrieldasilva]

Having the same issue here. Suddenly sorting stopped working.

The only change I can relate is updating libraries (including this one from 1.8.0 to 1.8.1).

[yabdab]

Same here. Everything else works, but the TW classes stopped sorting.
I am using Nova IDE from Panic fyi.

[yabdab]

Looks like it may still work in css and scss files, but not blade.php files?

[yabdab]

Maybe related to this?
tailwindlabs/prettier-plugin-tailwindcss#52

[Blinks44]

Fresh project in PHPStorm also stopped to sort tailwind classes. Everything from plugin works, except sorting.

[Blinks44]

@shufo
Fresh install laravel with only blade-prettier plugin. Everything works, even sorting my classes with tailwind classes, but not tailwind classes order (tried version 1.7 and 1.8 of blade-prettier):

Previously flex and flex-col always stand together

[yabdab]

Any progress in this?

[shufo]

Sorry for late reply. I've been a little busy lately.
And thanks for the report.

I tried reproduced it today and seems working in my environment.

• VSCode 1.74.2
• prettier-vscode 9.10.3
• prettier-plugin-blade 1.8.3

simplescreenrecorder-2022-12-29_13.29.03.mp4

I remember reproduced this bug at #161 (comment), but for some reason I can't reproduce it now.

Is this bug still occurring in your environment? If it does not occur, upstream prettier-vscode or vscode may be the cause. Because I didn't touch around tailwind sort feature recently.

[Blinks44]

Is this bug still occurring in your environment? If it does not occur, upstream prettier-vscode or vscode may be the cause. Because I didn't touch around tailwind sort feature recently.

In PHPStorm sorting still doesn't work. Everything from plugin works, except sorting tailwind classes.

Enviroment:

• PHPStorm 2022.3.1
• Built in prettier
• prettier-plugin-blade 1.8.3

One months ago everything works fine, but not now :(

[yabdab]

Using the following with Nova. Still not working?

@shufo/prettier-plugin-blade@1.8.3
prettier-plugin-tailwindcss@0.2.1
prettier@2.8.1

One thing I did notice, is it does place non-tailwind classes first, but tailwind classes do not sort correctly.

It does sort on .css and .scss files, but does not work on php and .blade files anymore. ☹️

[Blinks44]

Using the following with Nova. Still not working?

@shufo/prettier-plugin-blade@1.8.3 prettier-plugin-tailwindcss@0.2.1 prettier@2.8.1

One thing I did notice, is it does place non-tailwind classes first, but tailwind classes do not sort correctly.

It does sort on .css and .scss files, but does not work on php and .blade files anymore. ☹️

Yep, absolutely the same in PHPStorm.

[wsamoht]

One thing I did notice, is it does place non-tailwind classes first, but tailwind classes do not sort correctly.

This is my experience as well. @shufo, your video is showing custom classes and Tailwind classes being sorted (custom classes before Tailwind classes). Try reproducing with just Tailwind classes.

[beebmx]

Using the following with Nova. Still not working?
@shufo/prettier-plugin-blade@1.8.3 prettier-plugin-tailwindcss@0.2.1 prettier@2.8.1
One thing I did notice, is it does place non-tailwind classes first, but tailwind classes do not sort correctly.
It does sort on .css and .scss files, but does not work on php and .blade files anymore. ☹️

Yep, absolutely the same in PHPStorm.

Same here with PHPStorm with @shufo/prettier-plugin-blade@1.8.4

[yabdab]

Is this something we gotta live with, or are there plans to fix?

[shufo]

@wsamoht
It also seems works as expected with just tailwindcss classes.

simplescreenrecorder-2023-01-08_19.27.27.mp4

This is the same sort as Official plugin.

There may be other causes, but I can't reproduce them.
Can you reproduce it with VSCode? If it cannot be reproduced, it may be a problem specific to PHPStorm or other plugins.

[ctoma]

I have the same issue the others have mentioned, but with PHPStorm. To eliminate PHPStorm as the cause I have been trying to get it working just using the CLI, but this yields the same behavior that the others experience.

I based these files on the CLI test here; https://github.com/shufo/prettier-plugin-blade/tree/main/__tests__/fixtures/runtimeConfig/tailwind

I'm not able to get the CLI test working correctly either.

root@X:/blade-testing# node -v
v16.19.0
root@X:/blade-testing# ./node_modules/.bin/prettier -v
2.8.2
root@X:/blade-testing# cat resources/views/.prettierrc.json
{
    "overrides": [
        {
            "files": ["*.blade.php"],
            "options": {
                "tabWidth": 4,
                "parser": "blade"
            }
        }
    ],
    "printWidth": 120,
    "tabWidth": 4,
    "plugins": ["@shufo/prettier-plugin-blade"],
    "wrapAttributes": "auto",
    "sortTailwindcssClasses": true,
    "tailwindcssConfigPath": "tailwind.config.js",
    "sortHtmlAttributes": "none"
}
root@X:/blade-testing# cat resources/views/tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}
root@X:/blade-testing# cat resources/views/index.blade.php
<button class="text-white myclass px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">abc</button>
root@X:/blade-testing# ./node_modules/.bin/prettier resources/views/index.blade.php --config /blade-testing/resources/views/.prettierrc.json
<button class="myclass text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">abc</button>
root@X:/blade-testing#

I have tried using pretty much every combination of prettier flags, tailwind config I can think of and am not able to get it working as expected.

[wsamoht]

It also seems works as expected with just tailwindcss classes.

@shufo I am using VSCode where it is not working. I tried the exact same classes that you did and they don't sort for me. I will try and play around with it some more to see if I can narrow it down.

[shufo]

Recently I fixed a Tailwind related bug that reproduced when I upgraded Tailwind to 3.2 and Released https://github.com/shufo/prettier-plugin-blade/releases/tag/v1.8.6.

Can anyone try 1.8.6? After upgrading, don't forget to reload the Editor (VSCode, PHPStorm, etc...)

[yabdab]

@shufo In some limited tests I am seeing that it is now working in Panic's Nova editor ( for Mac ) 🎉

[wsamoht]

@shufo version 1.8.6 fixed my issues in VS Code! THANK YOU!!!!!!

[Blinks44]

Yep, since 1.8.6 everything works fine in PHPStorm.

You're awesome @shufo !

[shufo]

It seems to be fixed in every editor, so I'm going to close this issue.