Tailwind CSS class sorting in `Nuxt UI` templates and lack of documentation

[mrkaashee]

Package

v4.x

Description

❓ What's missing

Nuxt UI is built with Tailwind CSS, but currently:

• There’s no mention in the Nuxt UI documentation about how to enable or enforce class sorting.
• Tools like eslint-plugin-tailwindcss or prettier-plugin-tailwindcss are not recommended or documented.

This leads to inconsistency when building or extending UI components using the same design system.

---

⚠️ Related problem: Prettier vs ESLint conflicts

Trying to use prettier-plugin-tailwindcss just for class sorting often leads to conflicts with existing ESLint rules — especially when ESLint is the primary formatter (as is often the case in Nuxt projects).

Since Nuxt UI doesn't officially support or document a class sorting solution, developers are left guessing how to:

• Sort Tailwind classes in a consistent way
• Avoid conflicts between Prettier and ESLint
• Align their own UI code with Nuxt UI’s internal structure

---

✅ Suggestions

1. Document a recommended approach for Tailwind class sorting (via ESLint or Prettier), including tips on avoiding formatting conflicts.

Even a short note would be helpful for teams building on Nuxt UI.

Thanks for all the great work on Nuxt UI — it would be great to see these best practices adopted or supported!

[HugoRCD]

The ESLint extension doesn't yet support v4 francoismassart/eslint-plugin-tailwindcss#325 so I don't think you really have a choice about which tool to use 🤔

[mrkaashee]

Thanks for the quick reply — makes sense that the ESLint plugin can’t be used right now But this leaves a gap for teams using Nuxt UI with ESLint-based workflows.

For example, in our current setup:

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": { "strings": "on" },
  "tailwindCSS.classAttributes": ["class", "ui"],
  "tailwindCSS.experimental.classRegex": [
    ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  "editor.formatOnSave": false,
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.eslint": "always"
  }
}

We're using ESLint for all formatting — no Prettier — but there's no working class sorter

❓ So what should we do now?

At the very least, could Nuxt UI:

• Mention these limitations in the docs (e.g., "Tailwind class sorting isn't supported via ESLint yet, and using Prettier may cause conflicts")
• Provide a temporary recommendation (e.g., either use Prettier only for class sorting, or wait for ESLint support)

This would really help teams trying to align with Nuxt UI's structure while still using strict ESLint-based tooling.

Thanks again!

[benjamincanac]

I'm not sure it's up to us to document this honestly, Nuxt UI is not enforcing users to use either ESLint or Prettier. You can see
the recommendations on the Tailwind CSS docs: https://tailwindcss.com/docs/editor-setup#class-sorting-with-prettier

Likewise, we don't mention in the docs to install the Vue extension for VSCode.

Maybe once the ESLint plugin is ready we can add a note to reference both with prettier.