Project is not detected when main stylesheet is named `tailwindcss.css` and contains `@import "tailwindcss";`

[Over-reaction]

What version of VS Code are you using?

1.102.2 (Universal)

What version of Tailwind CSS IntelliSense are you using?

0.14.25

What version of Tailwind CSS are you using?

"tailwindcss": "^4.1.11",

What package manager are you using?

pnpm

What operating system are you using?

macOS

I have a new project that created a file called src/assets/styles/tailwindcss.css. At this time, code completion can be done, but when the mouse hovers over it, the CSS style function for the class name is not working. I found that the file name cannot be called tailwindcss.css, it is called tailwind.css, and everything works normally

我有一个新项目 创建了一个文件 src/assets/styles/tailwindcss.css 此时能进行代码补全 但是鼠标移入显示该类名的css样式功能失效了 我发现这个文件名不能叫tailwindcss.css 叫tailwind.css功能就一切正常

[thecrypticace]

The project's stylesheet filename should not make a difference. Please provide a reproduction.

[Over-reaction]

Thank you for your answer. I wrote an example and captured a picture
I found that the file name cannot be called tailwindcss.css. It should be called tailwind.css. The functionality is normal

https://codesandbox.io/p/devbox/tailwind-gl9w54

[thecrypticace]

Okay, I can reproduce. I have a feeling I know what the problem is but need to verify first.

[thecrypticace]

The core of the problem is in our handling of CSS imports here:

tailwindcss-intellisense/packages/tailwindcss-language-server/src/resolver/index.ts

Lines 168 to 170 in 3d3f866

	// Given `foo/bar.css` try `./foo/bar.css` first before trying `foo/bar.css`
	// as a module
	preferRelative: true,

This means that @import "tailwindcss"; will try tailwindcss.css before it tries node_modules/tailwindcss. This is important for imports like @import "components/some-file.css" where a leading ./ isn't present.

The reason for this behavior is twofold:

• Our Vite plugin uses path resolvers (its what turns tailwindcss into a file path) provided by Vite and this matches the behavior there. This may even use information from tsconfig.json for path aliases.
• Additionally, this behavior aligns with postcss-import which might be used in conjunction with Tailwind CSS whether directly or indirectly. Tailwind CSS itself can handle imports so it shouldn't be needed but a build tool might be using it anyway.

While Tailwind CSS itself handles imports differently in the CLI or in the PostCSS plugin (without postcss-import installed) we still need to be compatible with these projects so we have this behavior enabled when loading CSS files. As a result the file ends up trying to load itself, fails, and no project gets created.

I'll need to think on this one some.

[m1rn]

I ran into the same problem too.

[vahidamiryan]

If IntelliSense doesn’t work with styles.scss as the entrypoint, use a CSS entrypoint instead:
Create src/tailwind.css:
@import "tailwindcss";
Update settings.json:
"tailwindCSS.experimental.configFile": "src/tailwind.css",
Restart the editor → IntelliSense should now suggest classes.

[gugote]

Thank you for your answer. I wrote an example and captured a picture I found that the file name cannot be called tailwindcss.css. It should be called tailwind.css. The functionality is normal

this fixed my issue!