CSS Intellisense not working

[nazar1ua]

tailwindlabs/tailwindcss-intellisense#663 (comment)
It is bug on module side

[nazar1ua]

I'm sorry, I looked into module code, and saw that it is problem on @tailwindlabs side with resolveConfig.js file

[nazar1ua]

But as a temporary workaround we can do this (at https://github.com/nuxt-modules/tailwindcss/blob/main/src/module.ts#L142-L148):

    const resolveConfig: any = await import('tailwindcss/resolveConfig.js').then(r => r.default || r)
    const resolvedConfig = resolveConfig(tailwindConfig)
    resolvedConfig.plugins = []
    addTemplate({
      filename: 'tailwind.config.cjs',
      getContents: () => `module.exports = ${JSON.stringify(resolvedConfig, null, 2)}`,
      write: true
    })

[nazar1ua]

Can I open pr @atinux?

[atinux]

Sure thing!

[leo91000]

For those who can't wait the fix, you can use pnpm patch @nuxtjs/tailwindcss and modify the dist/module.mjs with the @nazar1ua modification

[tkofh]

The current fix solves the base resolved configuration, but it does not handle plugins from Tailwind Presets.

Reproduction: https://stackblitz.com/edit/nuxt-starter-afebar

I believe we could expand upon the fix like this:

const resolveConfig: any = await import("tailwindcss/resolveConfig.js").then((r) => r.default || r)
const resolvedConfig = resolveConfig(tailwindConfig)
resolvedConfig.plugins = []
for (const preset of resolvedConfig.presets) {
  if(preset.plugins != null) {
    preset.plugins = []
  }
}
addTemplate({
  filename: "tailwind.config.cjs",
  getContents: () => `module.exports = ${JSON.stringify(resolvedConfig, null, 2)}`,
  write: true,
})

Can I open a PR to add this?

[nazar1ua]

Yes

[ERPedersen]

This problem also occurs for me when using purge.options.safelist or just safelist in the root of the tailwind config. If i remove any of these properties, the intellisense starts working again.

Example 1

tailwind.config.js:

export default {
  purge: {
    options: {
      safelist: [
        { pattern: /(bg|text)-./ },
      ],
    },
  },
}

tailwind.config.cjs:

module.exports = {
  'purge': {
    'options': {
      'safelist': [
        {
          'pattern': {},
        },
      ],
    },
  },
  'safelist': [
    {
      'pattern': {},
    },
  ],
};

Example 2 (Tailwind ^3)

tailwind.config.js:

export default {
  safelist: [
    { pattern: /(bg|text)-./ },
  ],
}

tailwind.config.cjs:

module.exports = {
  "safelist": [
    {
      "pattern": {}
    }
  ],
}

[ineshbose]

Is this still being experienced? This has not been an issue for me recently - I'm not sure what fixed it, maybe the extension was updated in the background, but all intellisense is working flawlessly now.