[BUG] Sorting classes does not work the same way as Tailwind's sort order

[darylknight]

Describe the bug The docs for this plugin state that it uses "order process from the official prettier-plugin-tailwindcss". However, while trying this plugin out for the first time today, most of the examples given on that page are not sorted the same way using this plugin:

---

Tailwind docs:

Actual Results: <div class="flex h-24 p-3 ml-4 text-gray-700 border-2 border-gray-300 shadow-md"></div>

---

Tailwind Docs:

Actual Results: <div class="scale-125 opacity-50 hover:opacity-75 hover:scale-150"></div>

---

Tailwind Docs:

Actual Results: <div class="grid grid-cols-2 lg:grid-cols-4 sm:grid-cols-3"></div>

---

Is my end somehow set up wrong? Or is this plugin not actually meant to use the tailwind class order?

My .eslint.rc config file:

{
	"plugins": ["tailwindcss"],
	"extends": ["plugin:tailwindcss/recommended"]
}

Expected behavior This plugin should be sorting classes in the same way listed in the Tailwind docs.

Environment (please complete the following information):

• OS: MacOS
• "eslint": "^8.22.0",
• "eslint-plugin-tailwindcss": "^3.6.0",
• VSCode 1.70.2

[sawirricardo]

Any updates on this?

[markflorkowski]

I also ran into something similar today where negative margin classes seem to be sorted differently than the official tailwind prettier plugin. Eg:

prettier-plugin-tailwindcss: -ml-2 flex items-center rounded bg-gray-850/80 py-1 px-1.5 text-xs font-semibold uppercase text-gray-400

eslint-plugin-tailwindcss: flex -ml-2 items-center rounded bg-gray-850/80 py-1 px-1.5 text-xs font-semibold uppercase text-gray-400

[locona]

@darylknight

~I have confirmed that with the following rules off and prettier-plugin-tailwindcss it works correctly as documented below~

https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/e2a1010d76dd7bcc969bed93ddbe952ba7af75b0/docs/rules/classnames-order.md

'tailwindcss/classnames-order': 'off'

[darylknight]

Where are you adding 'tailwindcss/classnames-order': 'off'? Nothing's changed with this, it's still ordering things weirdly.

[locona]

@darylknight here https://github.com/3-shake/3design-ui/pull/803

[darylknight]

Sorry I don't follow... you've submitted a pull request which includes one of your own UI libraries?

[cmalard]

@locona prettier plugin is not the subject here 😉 This is the official one and according to Prettier team, it should not do what it does... basically, it should be done with an ESLint plugin (potentially this one in this repo, here)

[locona]

@cmalard thanks. I fully understand that. What I have addressed in my project is only a temporary response. A permanent solution will need to be found in the future.

[locona]

@darylknight Resolved.

Does tailwindcss.config.js exist in the same directory where .eslintrc.js exists?　 The execution result depends on tailwind.config.js.

If you want to get the same result as the "order process from the official prettier-plugin-tailwindcss", please try the following configuration in .eslintrc.js.

module.exports = {
  ...
  settings: {
    // ==> Append
    tailwindcss: {
      config: 'packages/3design-ui/tailwindcss.config.js',
    },
  },
};

---

ENV

• VSCode: 1.72.0
• eslint-plugin-tailwindcss: 3.6.2
• tailwindcss: 3.1.8

[darylknight]

This is not resolved. No changes have been made to francoismassart/eslint-plugin-tailwindcss. Yes, both .eslintrc(.js) and tailwind.config.js are both in the root of the repository. Adding your configuration does not change anything because 3design-ui is not in my project.

[locona]

@darylknight Hmmm, I see. If possible, could you tell us the repository for the project?

[darylknight]

My boilerplate Craft CMS installation is a good reference. The repo for that is public here: https://github.com/darylknight/boilerplate-tailwind

[locona]

@darylknight

eslint-plugin-tailwindcss depends on tailwind.config.js.

If you want to get a result like https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted, you need to add the following to tailwind.config. js as follows and run eslint --fix.

I can confirm that eslint-plugin-tailwindcss is working correctly as per the official documentation.

module.exports = {
	// The content key tells tailwind to scan all these files, to build the CSS from
	content: ['./templates/**/*', './src/**/*.{html,vue,ts,pcss,js}'],

	/*
	// Set classes here that should always be included. Freeform uses py-3 and px-3
	safelist: ['py-3', 'px-3'],

	// Adding things to the theme key overwrites tailwind's default setup - like replacing the colours
	// Use the extend key to add to the config rather than replacing it
	theme: {
		colors: {
			blue: '#336699',
			white: '#fff',
			gray: '#b8b8b8',
			black: '#000',
			transparent: 'transparent',
		},

		// You can replace the Tailwind fonts with the client's brand fonts here
		fontFamily: {
			// sans: 'avant-garde-book', // ? overrides the default font
			// bold: 'avant-garde-bold',
			// medium: 'avant-garde-medium',
		},

		extend: {
			// ? The 'extend' key adds to the config instead of replacing it
			screens: {
				// '3xl': '1690px', // ? You can extend the breakpoints here to match design
			},
		},
	},
	*/
}

[darylknight]

No, it's not. Multiple other people have the same issue. Commenting out 90% of the tailwind config file doesn't change anything.

[francoismassart]

@darylknight , @cmalard , @markflorkowski , @locona , @sawirricardo

Sorry for the long waiting period, I mostly work on this during my free time 😅

I just published a new beta version which should support Tailwind CSS up to 3.2.3 as well as fixed ordering for older Tailwind CSS version.

Could you try it out via:

1. npm i -D [email protected]
2. Test it on your own projects
3. Share your feedback in the comments ?

MR: #176

Thank you for your feedback

[darylknight]

To be honest, it looks like it's not working at all now. I can't remember what's changed since I posted this in August, but it looks like this plugin doesn't support Twig files

[francoismassart]

For twig files I need to investigate but it is not related to the subject of this issue.

Version 3.7.0 has been released and it should fix the issue of this issue

npm i -D eslint-plugin-tailwindcss or npm i -D [email protected]

If the ordering issue persists, please open a new ticket.

Cheers.