Required `tailwind.config.js` could become a problem with tailwindcss v4

[beldur]

What version of VS Code are you using?

v1.8.2

What version of Tailwind CSS IntelliSense are you using?

v0.10.5

What version of Tailwind CSS are you using?

v4.0.0-alpha.11

What package manager are you using?

npm

What operating system are you using?

Windows

Tailwind config

Describe your issue

Not necessarily a bug but something that should be considered for the future: It seems Tailwind v4 is not required to have a tailwind.config.js file anymore. (see: https://tailwindcss.com/blog/tailwindcss-v4-alpha#zero-configuration-content-detection)

Currently the tailwindcss-intellisense vscode addon requires a tailwind.config.js file to be present in order to activate.

This requirement could become a problem when tailwind v4 gets fully released.

[adamwathan]

Hey! This is already solved — the extension works as expected in a v4 project with no tailwind.config.js file. Make sure you are on the prerelease channel if you aren't already to see it working 👍

[beldur]

Thanks for the quick reply. I got confused by the README that states (also for the pre-release version)

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

I'm still having trouble getting the addon to work even with the pre-release version. The console output is:

Searching for Tailwind CSS projects in the workspace's folders.
{"tailwind":{"version":"4.0.0-alpha.11","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
[Error - 9:06:22 PM] [GLOBAL] Error creating project: TypeError: expected path to be a string
[Global] Creating projects: []

My workspace is a simple monorepo structure that is based on this structure: https://github.com/vercel/turbo/tree/main/examples/basic

[beldur]

After some debugging I think I found the problem. Somehow the call to normalizePath in this line: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/tailwindcss-language-server/src/project-locator.ts#L443

is made not with a simple string but with an object:

{
  base: '...PATH_TO_MY_PROJECT...\\apps\\web\\lib',
  glob: '**/*.{py,tpl,js,vue,php,mjs,cts,jsx,tsx,rhtml,slim,handlebars,twig,rs,njk,svelte,liquid,pug,md,ts,heex,mts,astro,nunjucks,rb,eex,haml,cjs,html,hbs,jade,aspx,razor,erb,mustache,mdx}'
}

So it seems that this https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/tailwindcss-language-server/src/project-locator.ts#L451 returned an object as can be seen with the yield* globs.

But this then doesn't work well with

      for await (let file of detectContentFiles(entry.packageRoot)) {
        yield {
          pattern: normalizePath(file),
          priority: DocumentSelectorPriority.CONTENT_FILE,
        }
      }

[beldur]

Thanks for looking into it @hampustagerud