Add Tailwindcss class sorter

[dev-cetus]

Describe the feature

it would be nice to be able to activate an option to enable the tailwindcss class sorter

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[meirroth]

Hey @dev-cetus, the class sorter is a prettier plugin, so not handled with eslint.

To get it working once you've integrated prettier with eslint, you simply add the following line to your .prettierrc file:

  "plugins": ["prettier-plugin-tailwindcss"]

[dev-cetus]

hey!
on the tailwind page they offer the module for prettier, but there is also one for eslint -> https://www.npmjs.com/package/eslint-plugin-tailwindcss

[shinGangan]

Hi @dev-cetus , thank you for the great suggestion. I have one question regarding this issue.

• Q. Will all Nuxt users benefit from adding this plugin?

The addition of this plugin is nice for Tailwind CSS users, but unnecessary for users who don't use Tailwind CSS.
I use Nuxt UI so I can benefit from it, but not all Nuxt users.

It is questionable to add rules as official modules that do not benefit all Nuxt users.

[dev-cetus]

Hi @shinGangan !
Yes you're right, it will only be useful for tailwindcss users, as this plugin is only useful for eslint users. I suggest tailwindcss because that's what I use, but if unocss, bootstrap and other ui frameworks offer a class sorter, then they should be added.

[shinGangan]

@dev-cetus , thanks for comment!

As a web application developer, I agree with this opinion.
If the rules are used in other UI frameworks, I would be happy if they were introduced, as the settings would be reduced.

I suggest tailwindcss because that's what I use, but if unocss, bootstrap and other ui frameworks offer a class sorter, then they should be added.

However, I think it is better to consider topics related to Nuxt Framework and topics related to UI Framework separately from a maintenance perspective.
I think it's better for each UI Framework user to set their own rules.

[meirroth]

This module is designed to be easily extensible, so I don't see why it should include rules for specific libraries.

[antfu]

It could be extended by the tailwind module with the module hook. It's out-of-scope of this module.

[gwynhokkers]

Just in case anyone stumbles across this, you can easily use the module by including it in the eslint.config
npm i eslint-plugin-tailwindcss

import tailwind from 'eslint-plugin-tailwindcss'
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
	{
		rules: {
		// Global
		// Vue
			'vue/multi-word-component-names': 0,
			'vue/max-attributes-per-line': [
				'warn',
				{
					singleline: {
						max: 5
					}
				}
			],
			'vue/no-v-html': 0
		}
	},
	...tailwind.configs['flat/recommended']
)