Compatibility Issue: Cannot resolve Nuxt UI's #build/ui.css alias

[xlsama]

Problem

When using prettier-plugin-tailwindcss with Nuxt UI 4.2.0, Prettier fails with the following error:

Error: Can't resolve '#build/ui.css' in '.../node_modules/@nuxt/ui/dist/runtime'

Environment

• @nuxt/ui: ^4.2.0
• prettier-plugin-tailwindcss: ^0.7.1
• prettier: ^3.6.2
• nuxt: ^4.2.1

Workaround

Remove tailwindStylesheet from .prettierrc.json. The plugin will still work using its default Tailwind discovery mechanism.

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

4.2.0

Reproduction

1. Create a CSS file with @import '@nuxt/ui';
2. Configure .prettierrc.json with tailwindStylesheet pointing to that CSS file
3. Run prettier --write .
4. Error occurs

Description

.

Additional context

No response

Logs

[error] app/components/home/Card.vue: Error: Can't resolve '#build/ui.css' in '/Users/xlsama/w/store-health-web/node_modules/.pnpm/@nuxt+ui@4.2.0_@babel+parser@7.28.5_async-validator@4.2.5_change-case@5.4.4_db0@0.3.4_e_66a90f6365abf4cefd0d434e2d3f0e4e/node_modules/@nuxt/ui/dist/runtime'
[error]     at h (file:///Users/xlsama/w/store-health-web/node_modules/.pnpm/prettier-plugin-tailwindcss@0.7.1_@prettier+plugin-oxc@0.0.5_prettier@3.6.2/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:231:4669)
app/components/home/Compliance.vue
[error] app/components/home/Compliance.vue: Error: Can't resolve '#build/ui.css' in '/Users/xlsama/w/store-health-web/node_modules/.pnpm/@nuxt+ui@4.2.0_@babel+parser@7.28.5_async-validator@4.2.5_change-case@5.4.4_db0@0.3.4_e_66a90f6365abf4cefd0d434e2d3f0e4e/node_modules/@nuxt/ui/dist/runtime'

[benjamincanac]

This is a regression of #5355, we removed the #build/ui.css import defined in package.json to use real theme templates in Vite. First, did you update your tsconfig.node.json?

{
  "compilerOptions": {
    "paths": {
      "#build/ui": [
-       "./node_modules/@nuxt/ui/.nuxt/ui"
+       "./node_modules/.nuxt-ui/ui"
      ]
    }
  }
}

I'm not familiar with this prettier plugin but it might be worth trying to add "#build/ui.css": ["./node_modules/.nuxt-ui/ui.css"] in there too.

[benjamincanac]

Wait, my answer is probably wrong since you're using Nuxt and not Vite. I'll have to try this plugin myself to provide a better answer.

[benjamincanac]

I'm sorry I don't have a real solution for this 😬 Does it work if you replace the tailwindStylesheet by:

{
  "plugins": ["prettier-plugin-tailwindcss"],
- "tailwindStylesheet": "./app/assets/css/main.css"
+ "tailwindStylesheet": "./.nuxt/ui.css"
}

[yschroe]

I'm sorry I don't have a real solution for this 😬 Does it work if you replace the tailwindStylesheet by:

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

• "tailwindStylesheet": "./app/assets/css/main.css"

• "tailwindStylesheet": "./.nuxt/ui.css"
  }

For me prettier does not throw an error anymore but the order of sorted classes is different than before. Probably because the plugin does not know of the styles defined in main.css and about the custom generated tailwind classes like gap-1, gap-2 etc. anymore.

How is the #build/ui.css import in node_modules/@nuxt/ui/dist/runtime/index.css meant to be resolved normally? Isn't a subpath import in package.json required for this?

[benjamincanac]

That makes sense.. It's a virtual Nuxt file compiled into .nuxt/ui.css: https://github.com/nuxt/ui/blob/v4/src/templates.ts#L171

[benjamincanac]

It worked before because this import was a workaround for Vite, you can read more in #5355

[yschroe]

Ah, I meant how does the bundler know that when it follows the imports from assets/css/main.css -> @nuxt/ui -> #build/ui.css that this alias points to ./.nuxt/ui.css? Is this only defined in the tsconfig of the user's nuxt project? I would have thought that the nuxt-ui package itself needs to define all aliases that are used in its source files.

Btw, there is one open issue in tailwindlabs/prettier-plugin-tailwindcss#414 which is probably related?

[francoism90]

I'm sorry I don't have a real solution for this 😬 Does it work if you replace the tailwindStylesheet by:

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

• "tailwindStylesheet": "./app/assets/css/main.css"

• "tailwindStylesheet": "./.nuxt/ui.css"
  }

That doesn't work for. Removing the line works, but I believe it's needed for the plugin to function correctly.

[xlsama]

The tailwindStylesheet configuration is necessary for proper Tailwind CSS class recognition.

The tailwindStylesheet option in .prettierrc.json is required for prettier-plugin-tailwindcss to correctly identify Tailwind classes. For example, when hovering over text-primary in the IDE, it should display:

.text-primary {
  color: var(--ui-primary);
}

Correct configuration:

{
  "tailwindStylesheet": "app/assets/css/main.css"
}

Where main.css imports Nuxt UI and defines the CSS variables:

@import 'tailwindcss';
@import '@nuxt/ui';

:root {
  --ui-primary: #006440;
  --ui-error: #a80000;
}

Incorrect configuration:
Using tailwindStylesheet: "./.nuxt/ui.css" does not work correctly. The plugin cannot properly resolve the Nuxt UI alias #build/ui.css from that path, and Tailwind classes won't be recognized or displayed correctly in the IDE.

The workaround mentioned (removing tailwindStylesheet) may allow Prettier to run, but it will lose the IDE hover/intellisense functionality for Tailwind classes, which is an important developer experience feature.