6.13 Regression: VS Code Intellisense not working when using a remote Layer

[mrleblanc101]

Environment

Layer:

------------------------------
- Operating System: Darwin
- Node Version:     v20.18.0
- Nuxt Version:     3.15.2
- CLI Version:      3.20.0
- Nitro Version:    2.10.4
- Package Manager:  [email protected]
- Builder:          -
- User Config:      modules, ssr, devtools, app, css, colorMode, future, compatibilityDate, vite, eslint, i18n, tailwindcss
- Runtime Modules:  floating-vue/[email protected], @nuxtjs/[email protected], @vueuse/[email protected], @pinia/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected]
- Build Modules:    -
------------------------------

App:

------------------------------
- Operating System: Darwin
- Node Version:     v20.18.0
- Nuxt Version:     3.15.2
- CLI Version:      3.20.0
- Nitro Version:    2.10.4
- Package Manager:  [email protected]
- Builder:          -
- User Config:      extends, modules, devtools, app, future, compatibilityDate, eslint
- Runtime Modules:  @nuxt/[email protected]
- Build Modules:    -
------------------------------

Reproduction

Cannot be reproduced inside a sandbox

Describe the bug

The change from .nuxt/tailwind.config.cjs to .nuxt/tailwind/postcss.mjs seems to have broken VS Code Intellisense.
Now, instead of suggeting all values from Tailwind and my config, it only suggest value I already use inside my app.

Before:

After:

Additional context

Reverting to 6.12.0 currently solve the problem

Logs

[ineshbose]

Cannot be reproduced inside a sandbox

That's fine -- would you still be able to provide the contents of the generate .nuxt/tailwind/postcss.mjs (and .nuxt/tailwind.config.cjs in comparison) please?

[mrleblanc101]

Sorry for the delay, I completely forgot.

.nuxt/tailwind.config.cjs:

// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 1/27/2025, 12:05:10 PM
const configMerger = require("/Users/sleblanc/www/project_name/node_modules/layer_name/node_modules/@nuxtjs/tailwindcss/dist/runtime/merger.js");

const inlineConfig = {"content":[],"theme":{"extend":{}},"plugins":[]};

const config = [
require("/Users/sleblanc/www/project_name/node_modules/layer_name/tailwind.config.ts")
].reduce((prev, curr) => configMerger(curr, prev), configMerger(inlineConfig, { content: { files: ["/Users/sleblanc/www/project_name/node_modules/layer_name/app/components/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/components/global/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/components/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/layouts/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/pages/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/plugins/**/*.{js,ts,mjs}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/composables/**/*.{js,ts,mjs}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/utils/**/*.{js,ts,mjs}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/{A,a}pp.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/{E,e}rror.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/app.config.{js,ts,mjs}","/Users/sleblanc/www/project_name/app/components/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/components/global/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/components/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/layouts/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/pages/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/plugins/**/*.{js,ts,mjs}","/Users/sleblanc/www/project_name/app/composables/**/*.{js,ts,mjs}","/Users/sleblanc/www/project_name/app/utils/**/*.{js,ts,mjs}","/Users/sleblanc/www/project_name/app/{A,a}pp.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/{E,e}rror.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/app.config.{js,ts,mjs}"] } }));

module.exports = (() => {const cfg=config;cfg["darkMode"] = ["selector","[class~=\"dark-mode\"]"];;return cfg;})()

.nuxt/tailwind/postcss.mjs:

// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 1/27/2025, 12:07:29 PM
import configMerger from "@nuxtjs/tailwindcss/merger";

import cfg4 from "/Users/sleblanc/www/project_name/node_modules/layer_name/tailwind.config.ts";
const config = [
{"content":{"files":["/Users/sleblanc/www/project_name/app/components/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/components/global/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/components/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/layouts/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/pages/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/plugins/**/*.{js,ts,mjs}","/Users/sleblanc/www/project_name/composables/**/*.{js,ts,mjs}","/Users/sleblanc/www/project_name/utils/**/*.{js,ts,mjs}","/Users/sleblanc/www/project_name/app/{A,a}pp.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/{E,e}rror.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/app/app.config.{js,ts,mjs}","/Users/sleblanc/www/project_name/app/app/spa-loading-template.html"]}},
{},
{"content":{"files":["/Users/sleblanc/www/project_name/node_modules/layer_name/app/components/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/layouts/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/pages/**/*.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/plugins/**/*.{js,ts,mjs}","/Users/sleblanc/www/project_name/node_modules/layer_name/composables/**/*.{js,ts,mjs}","/Users/sleblanc/www/project_name/node_modules/layer_name/utils/**/*.{js,ts,mjs}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/{A,a}pp.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/{E,e}rror.{vue,js,jsx,mjs,ts,tsx}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/app.config.{js,ts,mjs}","/Users/sleblanc/www/project_name/node_modules/layer_name/app/app/spa-loading-template.html"]}},
cfg4
].reduce((acc, curr) => configMerger(acc, curr), {});

const resolvedConfig = (() => {const cfg=config;cfg["darkMode"] = ["selector","[class~=\"dark-mode\"]"];;return cfg;})();

export default resolvedConfig;

I'm not sure the issue is with the content, I think the VS Code extension probably load the top-most tailwind.config.js.
And by renaming the file, the extension has no idea that postcss.config.mjs contains the tailwind config and not other postcss config.

[mrleblanc101]

The extension is https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss by the official "Tailwindcss" team, downloaded over 8 million times.

And the README state:

In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.{js,cjs,mjs,ts,cts,mts} in your workspace.

[mrleblanc101]

I guess we could use the tailwindCSS.experimental.configFile settings.
https://github.com/tailwindlabs/tailwindcss-intellisense?tab=readme-ov-file#tailwindcssexperimentalconfigfile
But there is this warning, so I think we need a better / permanent solution.

Experimental settings may be changed or removed at any time.

[ineshbose]

Ah!! I see what the issue is in your case now!

Your Nuxt app is lacking a root tailwind.config (which is fine) and rather just has a layer that does have a tailwind.config, but all-in-all, you solely depend on the generated config template. That's fair -- I also acknowledge that IntelliSense support with the module has been finicky (and we document using tailwindCSS.experimental.configFile for this), and I hope to improve this in 6.14 (as we discussed on Discord); while usually devs having a root tailwind.config may not have lot of issues for now.

What I (still) recommend for now (as a workaround for you) meanwhile is a small module in your project as I mentioned in our conversation:

export default defineNuxtModule((_, nuxt) => {
   addTemplate({
      filename: 'tailwind.config.cjs', // make sure this doesn't interfere with exposeConfig
      getContents: () => "module.exports = require('./tailwind/postcss.mjs')" // or hook into `tailwindcss:config` and `update:template`
   })
})

So this way you may not need to configure settings.json, or you can safely rely on your own module to generate a config that is unlikely to rename internally in this module.

[ineshbose]

I suppose naming the file tailwind.config.cjs in 6.12 was a good move and bad both. It's likely to be called postcss.mjs going forward as the generated templates by the module have expanded for now, so they ought to be inside .nuxt/tailwind; but let me see if we can provide some support or workaround using editorSupport module option; hence I mark this as a bug and enhancement both. Meanwhile if you want to use 6.13 with the above workaround(s) - that would be great. I understand that the IntelliSense issue is only arising from projects not having a root tailwind.config (or maybe content detection is off) which I am trying to see if we can solve for 6.14 using #842... still we have plenty options fortunately.

[mrleblanc101]

@ineshbose Maybe there is another workaround 🤔
Since I have a tailwind.config.ts inside the remote Layer, should I just create a tailwind.config.ts inside all my Apps that import and reexport the default object ?

Something like this:

import config from `@layer/my-layer/tailwind.config`;

export default config;

Then it would simply be a documentation issue ?
I'd prefer not doing this, I prefer how it worked before, but it's not the end of the world.

[mrleblanc101]

Otherwise, is there no way to have a .nuxt/tailwind.config.cjs and the .nuxt/tailwind/postcss.config.mjs as 2 seperate files ? We could even move the .nuxt/tailwind.config.cjs to .nuxt/tailwind/tailwind.config.cjs if necessary as the VS Code extension search for the config by the fileName and not a specific path.

[gukandrew]

Same here, downgrade to 6.12.2 fixed problem for me. But that's nuts.

[mrleblanc101]

I hope this can be fixed in a patch/minor that wont require/force us to upgrade to Tailwind v4

[ineshbose]

I hope this can be fixed in a patch/minor that wont require/force us to upgrade to Tailwind v4

Yes - I can assure you that I'm trying to brainstorm a solution for this (based on DX and effort/benefit), and I will definitely provide you with one.

But I don't think this is relevant for Tailwind v4 where JS configs are legacy, so it's limited to v3.