Intellisense won't work with a Nuxt3 project with a .tailwind.config.ts (typescript) file

[lucavenir]

What version of Tailwind CSS IntelliSense are you using?

v0.8.6

What version of Tailwind CSS are you using?

I'm using @nuxtjs/tailwindcss v5.3.1, which resolves to v3.1.8

What package manager are you using?

npm

What operating system are you using?

Ubuntu 22.04

Describe your issue

To reproduce, to the following:

1. Start a new Nuxt3 project (docs)
2. Install TailwindCSS on it (docs)
3. Choose to use a tailwind.config.ts file (Typescript) like the following:

import { Config } from "tailwindcss";

export default <Config>{
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
  ],
  theme: {},
  plugins: [],
};

TailwindCSS Intellisense outputs the following (extension outputs):

[Error - 6:52:46 PM] Tailwind CSS: No config file found.

Now, simply change the .ts file into a .js file, like so:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
  ],
  theme: {},
  plugins: [],
};

And tadah! This works. The extension outputs:

Found Tailwind CSS config file: /home/user/my-project-dir/tailwind.config.js
Loaded postcss v8.4.16: /home/user/my-project-dir/node_modules/postcss
Loaded tailwindcss v3.1.8: /home/user/my-project-dir/node_modules/tailwindcss

This simply means I'll just use a .js file as it changes nothing but this made me lose my mind for a couple of hours, so I'm opening this issue.

[thecrypticace]

This is because Tailwind CSS does not currently support TypeScript config files. We'd need to do a good bit of tooling work to support it. My guess is that Nuxt is compiling the tailwind.config.ts file and feeding the raw config to the postcss plugin (but not sure I'd have to look at the internals).

I gave a short explanation on why we don't (yet) support .ts files here: tailwindlabs/tailwindcss#7327 (comment)

[lucavenir]

Sorry! I had no clue. I guess I got confused by their docs.

Have a nice day!

[P4sca1]

As of @nuxtjs/tailwindcss v6, it will generate a .nuxt/tailwind.config.cjs file, which contains your complete tailwind config. To use it, edit your .vscode/settings.json file and add "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs".

[avxkim]

@P4sca1 had no effect for me. Using Nuxt 3.0.0 and latest @nuxtjs/tailwindcss

[P4sca1]

Have you started Nuxt one time so that the file gets generated?you might need to reload VSCode afterwards.

[avxkim]

@P4sca1 i've reloaded VSCode completely, then restarted nuxt with yarn dev, does it work for you? Might be missing some key detail probably

[P4sca1]

Yes, it works for me. You can check whether the tailwind.config.cjs file gets generated at the correct location.

[avxkim]

@P4sca1 yeah, it is located under this path: .nuxt/tailwind.config.cjs