Prettier Plugin Tailwind within :ui={...}

[UfukUstali]

Description

Does the prettier-plugin-tailwindcss (which sorts the tailwind classes for a consistent look) work within the :ui={...} props?

I did follow the installation guide in the NuxtUI website this is what my .vscode/settings.json looks like

{
  "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"]
}

If so it might be issue with my setup.

If not feel free to change this to a feature request.

[kamuiroeru]

+1

[benjamincanac]

I've never used this but have you tried adding :ui instead of ui as shown here https://github.com/tailwindlabs/prettier-plugin-tailwindcss#sorting-non-standard-attributes for :class?

[UfukUstali]

It did not work unfortunately. I did upgrade to the latest versions of both prettier 3.0.3 and the prettier-plugin-tailwindcss 0.5.6. I have used what was recommended both this Sorting non-standard attributes and this Sorting classes in function calls (by themselves and together with both with ui and :ui).

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

I did add :ui to here inside the settings.json file hoping that would do change something it did not.

"tailwindCSS.classAttributes": ["class", "className", "ngClass", "ui"]

I will open an issue with the prettier-plugin-tailwindcss as well after this.

[francoism90]

What should one use for this to work inside :ui? :)

@UfukUstali Could you show me what you're using?

Edit: This seems to work:

// .prettierrc
{
    "$schema": "https://json.schemastore.org/prettierrc",
    "plugins": [
        "prettier-plugin-organize-imports",
        "prettier-plugin-tailwindcss"
    ],
    "semi": false,
    "singleQuote": true,
    "tailwindAttributes": ["class", "className", "ui", ":ui"],
    "tailwindFunctions": ["cva", "clsx", "ui", ":ui"],
    "tailwindStylesheet": "./resources/css/app.css"
}