IntelliSense fails with "Error: Can't resolve '@tailwindcss/typography'" when using Yarn to install dependencies.

[alilefta]

What version of VS Code are you using?

v1.95.2

What version of Tailwind CSS IntelliSense are you using?

v0.12.13

What version of Tailwind CSS are you using?

v3.4.14

What package manager are you using?

yarn

What operating system are you using?

Windows 10

Tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ["./src/index.html"],
	darkMode: "selector",
	theme: {
		extend: {},
		fontFamily: {
			display: ["Inter", "sans-serif"],
			body: ['"Merriweather"', "serif"],
			Inter: ["Inter", "sans-serif"],
			IBMPlexArabic: ["IBM Plex Sans Arabic", "sans-serif"],
			NotoKufiArabic: ["Noto Kufi Arabic", "sans-serif"],
		},
	},
	plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
};

VS Code settings

	"tailwindCSS.includeLanguages": {
		"html": "html",
		"javascript": "javascript",
		"css": "css"
	},
	"editor.quickSuggestions": {
		"strings": true
	}

Reproduction URL

None

Describe your issue

The problem happened when i have installed some of tailwindcss plugins like @tailwindcss/typography using yarn v4.5.1 or newer, it resulted in Tailwind CSS IntelliSense stopped working, when i jumped to Tailwind CSS IntelliSense's Output panel, it was complaining with Error: Can't resolve '@tailwindcss/typography' and IntelliSense not providing suggestions and autocomplete features.

Cause:
When using yarn for installing dependencies, its newer feature pnp is not generating node_models directory by default, causing plugins: [require("@tailwindcss/typography") not working because bradlc.vscode-tailwindcss can't find the plugin.

Solution:
Switch to use node_modules instead of PnP and SDKs

1. Create .yarnrc.yml config file in the project.
2. Set nodeLinker to node-modules to let yarn generate regular node_module folder. The default is nodeLinker: "pnp" which generate a single Node.js loader file.

nodeLinker: node-modules

3. Run:

yarn

And that is it.

[florian-lefebvre]

I'm facing the same issue in a pnpm project. I just added the typography plugin and it can't resolve it now.

[alilefta]

I'm facing the same issue in a pnpm project. I just added the typography plugin and it can't resolve it now.

I think that pnpm also uses symlinks for dependencies and some of these dependencies cannot be accessed by their symlinks, you can check the pnpm docs, they call this feature hoisting.

[florian-lefebvre]

In my case, I'm using the shamefully hoist option so that should match the behavior of npm of yarn

[alilefta]

You also have to set the node_linker as well.

node_linker: hoisted

[florian-lefebvre]

Seems to work thanks!

[alilefta]

Welcome! Happy coding.