Autocomplete not working in apps directory with Tailwind v4 and plugin version 0.14.17 on Next.js Turborepo

[addegbenga]

What version of VS Code are you using?

v1.100.2

What version of Tailwind CSS IntelliSense are you using?

For example: v0.14.17

What version of Tailwind CSS are you using?

v4.0.8

What package manager are you using?

pnpm

What operating system are you using?

macOS

Tailwind config

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: { "@tailwindcss/postcss": {} },
};

export default config;

VS Code settings

{}

Reproduction URL

A public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

Describe your issue

I am using Tailwind CSS v4 on a Next.js Turborepo project. Autocomplete only works in my packages/ui directory but does not work in my apps directory. After further investigation, I discovered that this bug was introduced in the latest plugin version: 0.14.17. Autocomplete works as expected with version 0.14.16.

Steps to Reproduce

1. Set up a Next.js Turborepo with Tailwind v4.
2. Update the plugin to version 0.14.17.
3. Observe that autocomplete only works in packages/ui but not in apps.
4. Downgrade the plugin to 0.14.16 and see that autocomplete works in both directories.

Expected Behavior

Autocomplete should work in both packages/ui and apps directories regardless of the plugin version.

Actual Behavior

Autocomplete only works in packages/ui when using plugin version 0.14.17. It does not work in apps.

Additional Context

• Tailwind CSS v4
• Next.js Turborepo structure
• Plugin: 0.14.17 (broken), 0.14.16 (works)

Please let me know if more information is needed.

[thecrypticace]

Can you test 0.14.18 and see if your issue is fixed?

[addegbenga]

Can you test 0.14.18 and see if your issue is fixed?
I just tested it now, and it's still not fixed.

[thecrypticace]

@addegbenga

1. Can you provide a reproduction project as I'm not able to reproduce this?
2. Could you provide the logs from running the command "Tailwind CSS: Show Output"?

[B-HS]

Same error occurred and I also fixed by downgrade to 0.14.16 from 0.14.19.
I also almost same environment 1.100.2, next js 15 app router, pnpm, macos, and monorepo by pnpm.

In my case also same, works for ui/ (library) which located in same depth with www/ (nextjs)
but intelisense is not working for www/.

below is output when try to autocomplete

[Trace - 1:57:16 PM] Sending request '@/tailwindCSS/getProject - (39)'.
Params: {
    "uri": "file:///{PATH_FOR_PROJECT}/www/src/app/test/page.tsx"
}
[Trace - 1:57:16 PM] Received response '@/tailwindCSS/getProject - (39)' in 1ms.
No result returned.

[timmywil]

I was seeing the same or similar issue and found #1033 by searching for the error [GLOBAL] No matching project for document. Downgrading to v0.14.16 also works for me. FWIW, intellisense works in standard CSS and HTML files, but not all file types. In my case .ex and .heex were broken, but probably has the same issue as .tsx and .jsx. And again, it is a regression beginning in v0.14.17. I am using Tailwind 4.1.7.

[0-CAT]

Unfortunately, I am using Tailwind with Zed editor which doesn't support downgrading the version of LSPs.

I can share that my logs find zero projects to initialize with on startup:

Setting up server…
Listening for messages…
Language mappings are currently set via initialization options (`userLanguages`). This is deprecated and will be removed in a future release. Please use the `tailwindCSS.includeLanguages` setting instead.
Searching for Tailwind CSS projects in the workspace's folders.
[Global] Creating projects: []
[Global] Preparing projects...
[Global] Initializing projects...
[Global] Initialized 0 projects

Not sure if that deprecation warning is related, but I would assume not (since it's just a warning and not an error).

But then I get this output for every file I open:

[GLOBAL] No matching project for document {
  fsPath: '/path/to/file.tsx',
  normalPath: '/path/to/file.tsx'
}

In the LSP info, I see that the Registered workspace folders path is correct. I'm using [email protected] as well, and it looks like the LSP version is v0.14.19.

Autocomplete only works in packages/ui when using plugin version 0.14.17. It does not work in apps.

Mine actually does not work anywhere in the repository, so not sure what the difference is in my case.

[David2k13]

I also met, can only work in 0.12.18

[thecrypticace]

@0-CAT

Not sure if that deprecation warning is related, but I would assume not (since it's just a warning and not an error).

Nah, it's not. I need to make a PR to Zed to change how they pass that stuff through by default but just have not done that yet.

[Global] Creating projects: []

This tells me that it can't find any Tailwind CSS configs in your project. Could you share a reproduction? It would be super helpful to figure out what you're expecting to work and why the server can't find anything.

I am using Tailwind with Zed editor which doesn't support downgrading the version of LSPs.

You can! (sorta). I use Zed every day with a local build of the server. If you install the language server yourself globally (or really just in any folder somewhere) you can specify a custom language server path in your settings:

  "lsp": {
    "tailwindcss-language-server": {
      "binary": {
        "path": "/path/to/your/node/binary",
        "arguments": [
          "/path/to/your/global/node_modules/.bin/tailwindcss-language-server",
          "--stdio"
        ]
      },
      "settings": {
        "tailwindCSS": {
          "classFunctions": ["clsx"] /* this just an example to show settings,  you don't need these if you don't want them */
        }
      }
    },
  }

The relevant NPM package is @tailwindcss/language-server

@David2k13 Can you please provide a reproduction and logs (if in VSCode "Tailwind CSS: Show Output")

[0-CAT]

This tells me that it can't find any Tailwind CSS configs in your project. Could you share a reproduction? It would be super helpful to figure out what you're expecting to work and why the server can't find anything.

I can try to put together a minimal reproduction tomorrow, but for now: my setup was pretty much just using npx create-turbo@latest and then setting up Tailwind with the postcss process.

From what I saw in the LSP ReadMe and the relevant source code, for Tailwind 4 it just needs a .css file that has a Tailwind import in it, which I do have:

It did previously work a few weeks back with Zed, so something definitely changed.

If you install the language server yourself globally (or really just in any folder somewhere) you can specify a custom language server path in your settings

Might give this a try tomorrow, too, and see if v0.14.16 works as expected.

[zigang93]

solve with version 0.14.14

[stempest0925]

Me too, created through "create-next-app", using tailwind 4 and tailwind plugin 0.14.19, auto completion plugin does not work.

[bohdan-basov]

Works in 0.14.16. Still broken in 0.14.19

[thecrypticace]

@bohdan-basov @stempest0925 Can either of you provide a reproduction repo I can clone, system information, VSCode settings, etc…?

I'd really like to help solve whatever these problems are you're having but I can't without having actionable information. I test these processes all the time and don't generally encounter problems.

[0-CAT]

Here's a repro: https://github.com/0-CAT/zed-1377-repro

As additional information: I first tried creating a repro using create-turbo with NPM as the selected package manager, and it was able to find the project:

So, I deleted that and re-created using PNPM as the selected package manager, and that does not work:

Thinking that maybe something changed recently that doesn't play nicely with the symlinks that PNPM uses?

[David2k13]

@0-CAT

Not sure if that deprecation warning is related, but I would assume not (since it's just a warning and not an error).不确定该弃用警告是否相关，但我会假设不是（因为它只是一个警告而不是错误）。

Nah, it's not. I need to make a PR to Zed to change how they pass that stuff through by default but just have not done that yet.不，不是。我需要向 Zed 做一个 PR 来改变他们默认传递这些东西的方式，但还没有这样做。

[Global] Creating projects: []

This tells me that it can't find any Tailwind CSS configs in your project. Could you share a reproduction? It would be super helpful to figure out what you're expecting to work and why the server can't find anything.这告诉我它在您的项目中找不到任何 Tailwind CSS 配置。您能分享一份复制品吗？弄清楚您期望工作的内容以及服务器找不到任何内容的原因将非常有帮助。

I am using Tailwind with Zed editor which doesn't support downgrading the version of LSPs.我正在使用 Tailwind 和 Zed 编辑器，它不支持降级 LSP 的版本。

You can! (sorta). I use Zed every day with a local build of the server. If you install the language server yourself globally (or really just in any folder somewhere) you can specify a custom language server path in your settings:您可以！（有点）。我每天都使用 Zed 和服务器的本地构建。如果您自己全局安装语言服务器（或者实际上只是在某个位置的任何文件夹中安装），则可以在设置中指定自定义语言服务器路径：

  "lsp": {
    "tailwindcss-language-server": {
      "binary": {
        "path": "/path/to/your/node/binary",
        "arguments": [
          "/path/to/your/global/node_modules/.bin/tailwindcss-language-server",
          "--stdio"
        ]
      },
      "settings": {
        "tailwindCSS": {
          "classFunctions": ["clsx"] /* this just an example to show settings,  you don't need these if you don't want them */
        }
      }
    },
  }

The relevant NPM package is @tailwindcss/language-server相关的 NPM 包是 @tailwindcss/language-server

@David2k13 Can you please provide a reproduction and logs (if in VSCode "Tailwind CSS: Show Output")您能否提供复制品和日志（如果在 VSCode “Tailwind CSS： Show Output”）

[stempest0925]

你们中的任何一个能否提供我可以克隆的复制存储库、系统信息、VSCode 设置等......？

我真的很想帮助解决您遇到的任何问题，但如果没有可作的信息，我就无法解决。我一直在测试这些过程，通常不会遇到问题。

Thank you. I created multiple versions of next projects and changed multiple versions of intellisense. I found that the problem was the compatibility between tailwind 4 and sass. As long as I created a .scss file, I would lose the syntax prompt regardless of whether it was imported or used. However, this is unstable.

• In the next project of tailwindcss 4, after losing the syntax prompt using scss, switch to css to import the syntax to restore.
• After switching the css file and then changing to scss, sometimes the auto-completion can take effect, and sometimes it fails.
• Using the previous Next version (tailwindcss version 3), the auto-completion plug-in works normally

I am used to using sass in the next project. After reading the documents of next and tailwindcss, I found this sentence "Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus." Is this the design of the plug-in itself?

• OS: Windows 11
• VSCode: 1.100.2 (user setup)
• Node.js: 20.19.0

[thecrypticace]

@0-CAT A few things:

1. That project, as it is currently, shouldn't be picked up because there's no @import "tailwindcss" in the file.
2. The language server has a bug where adding that to a file currently breaks (VSCode is unaffected because of how the extension handles the server itself). It's picked up but some cleanup code errors. I've got a fix prepped for this.
3. Neither of these things is affected by NPM vs PNPM though and they both work fine if you restart the language server in Zed after @import "tailwindcss"; is added to the file.

Is that perhaps the difference between the screenshots you showed? Because when I clone the project NPM and PNPM correctly show "no matching project for document" and then after things are edited (and the server restarted because of the bug) they both work.

[thecrypticace]

Fix for the language server bug here: #1387

[maharshi-me]

Works in 0.14.16 for me. Using pnpm monorepo setup with Tailwind 4 and vite

[0-CAT]

@0-CAT A few things:

1. That project, as it is currently, shouldn't be picked up because there's no @import "tailwindcss" in the file.
2. The language server has a bug where adding that to a file currently breaks (VSCode is unaffected because of how the extension handles the server itself). It's picked up but some cleanup code errors. I've got a fix prepped for this.
3. Neither of these things is affected by NPM vs PNPM though and they both work fine if you restart the language server in Zed after @import "tailwindcss"; is added to the file.

Is that perhaps the difference between the screenshots you showed? Because when I clone the project NPM and PNPM correctly show "no matching project for document" and then after things are edited (and the server restarted because of the bug) they both work.

Thanks for noticing that I missed the import. It looks like I just forgot to commit the change before I pushed.

I'm wondering if maybe my testing was thrown off by that bug, since it's not likely that I restarted the LSP every time I added an import or moved files around.

When I get back in front of my laptop tonight, I'll take a look again using 0.14.19 and see what's up. I definitely got it working with 0.14.16 last night but will take another pass with 0.14.19.

[thecrypticace]

@0-CAT I'll be pushing out an update tomorrow to fix that bug btw so maybe wait for 0.14.20 and hopefully things will be fixed for you.

[0-CAT]

@thecrypticace Thanks! I've picked up v0.14.20 and given it a spin. I'm seeing projects get initialized and the auto-complete is looking good when working on components the apps folders (where the CSS file containing @import "tailwindcss" is).

However, with my @import "tailwindcss" file in the apps folders, the components in packages subfolders aren't getting auto-complete. I'm currently working around this by just adding a dummy css file in each package's root with the @import statement, but this was never necessary in the past.

Do you know if something has changed that would affect this, and is this the expected behavior?

[Narigo]

I've seen this issue in a monorepo with multiple SvelteKit based projects. The ones where it works have an app.css file and the one project that didn't work had an app.postcss file in their src folder. After renaming it to app.css (and updating the import of it), Tailwind Intellisense started to work. Thanks @0-CAT for pointing out the workaround adding a .css file!

[lumpinif]

I'm experiencing this with 0.14.21 and tailwindcss v4 in Turborepo.

[lumpinif]

I'm experiencing this with 0.14.21 and tailwindcss v4 in Turborepo.

downgraded to 0.14.16 and it starts working for me.