[Prettier Plugin] Can't seem to get "tailwindAttributes" and/or "tailwindFunctions" to work?

[UfukUstali]

This is a continuation of the Prettier Plugin Tailwind within :ui={...} issue I opend under the NuxtUI repo.

TLDR
In NuxtUI there is this prop called :ui that is used to override the default styles of the components with tailwind classes e.g. :

<UCard
  :ui="{
    base: 'w-full',
    divide: 'divide-y-0',
    body: {
      base: 'items-center flex justify-center',
    },
    footer: {
      base: 'flex items-center justify-center',
    },
  }"
></UCard>

End TLDR

As can be seen in the above example body.base has the same classes as footer.base but they are sorted differently. I did try using both Sorting non-standard attributes and Sorting classes in function calls to address this issue but couldn't get them to work properly.

On a side note the Tailwind Intellisense and hover tooltips does work within these :ui props like this:
.vscode/settings.json

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.experimental.configFile": "tailwind.config.ts",
  "tailwindCSS.experimental.classRegex": [
    ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["/\\*ui\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "tailwindCSS.classAttributes": ["class", "className", "ngClass", "ui"], <- mainly this here
}

Prettier version: 3.0.3
prettier-plugin-tailwindcss version: 0.5.6
prettier.config.js:

module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  semi: true,
  plugins: ["prettier-plugin-tailwindcss"],
  tailwindAttributes: ["ui", ":ui"],
  tailwindFunctions: ["ui", ":ui"],
};

I did use tailwindAttributes and tailwindFunctions by themselves and together both with ui and :ui and wasn't able to get results.

I was able to recreate both of the demos from Sorting non-standard attributes and Sorting classes in function calls within the same codebase and they did work.

<script setup lang="ts">
import clsx from "clsx";

const isHovering = false;
const a = clsx("rounded bg-blue-500 px-4 py-2 text-base text-white", {
  "bg-blue-700 text-gray-100": isHovering,
});
</script>

<template>
  <div
    myClassList="rounded rounded bg-blue-500 px-4 py-2"
  ></div>
</template>

module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  semi: true,
  plugins: ["prettier-plugin-tailwindcss"],
  tailwindAttributes: ["myClassList"],
  tailwindFunctions: ["clsx"],
};

[smile-alive]

Why did it close? I also encountered the same problem🥲

[coycoylaniba]

+1 tailwindFunctions also not working for me, using function call like cva

edit: idk what happened but it's working now

[UfukUstali]

I fixed my issue with this PR