Suggestions for Tailwind CSS v4 are not provided when using the Standalone CLI

[dlongz]

What version of VS Code are you using?

Version: 1.96.4 (Universal)
Commit: cd4ee3b1c348a13bafd8f9ad8060705f6d4b9cba
Date: 2025-01-16T00:16:19.038Z
Electron: 32.2.6
ElectronBuildId: 10629634
Chromium: 128.0.6613.186
Node.js: 20.18.1
V8: 12.8.374.38-electron.0
OS: Darwin arm64 23.6.0

What version of Tailwind CSS IntelliSense are you using?

0.14.1

What version of Tailwind CSS are you using?

"tailwindcss": "^4.0.0"

What package manager are you using?

npm

What operating system are you using?

macOS

Tailwind config

None as per Tailwind 4
index.css
@import "tailwindcss";

VS Code settings

{
	"workbench.colorTheme": "Bearded Theme feat. Will",
	"workbench.iconTheme": "a-file-icon-vscode",
	"terminal.integrated.defaultProfile.windows": "Git Bash",
	"[json]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"editor.suggestSelection": "first",
	"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
	"files.exclude": {
		"**/.classpath": true,
		"**/.project": true,
		"**/.settings": true,
		"**/.factorypath": true
	},
	"workbench.editorAssociations": {
		"*.pdf": "pdf.preview"
	},
	"redhat.telemetry.enabled": true,
	"bracket-pair-colorizer-2.depreciation-notice": false,
	"java.jdt.ls.vmargs": "-XX:+UseParallelGC -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xmx1G -Xms100m -javaagent:\"c:\\Users\\MrLew\\.vscode\\extensions\\gabrielbb.vscode-lombok-1.0.1\\server\\lombok.jar\"",
	"javascript.updateImportsOnFileMove.enabled": "always",
	"[javascriptreact]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[css]": {
		"editor.defaultFormatter": "vscode.css-language-features"
	},
	"sonarlint.rules": {
		"javascript:S4138": {
			"level": "off"
		},
		"javascript:S125": {
			"level": "off"
		}
	},
	"kite.showWelcomeNotificationOnStartup": false,
	"editor.largeFileOptimizations": false,
	"vsicons.dontShowNewVersionMessage": true,
	"[python]": {
		"editor.defaultFormatter": "ms-python.python",
		"editor.formatOnType": true
	},
	"editor.guides.bracketPairs": "active",
	"[typescriptreact]": {
		"editor.defaultFormatter": "vscode.typescript-language-features"
	},
	"files.associations": {
		"*.css": "tailwindcss"
	},
	"editor.quickSuggestions": {
		"strings": "on"
	},
	"Notes.notesLocation": "/Users/mrlewis/Notes",
	"git.autofetch": true,
	"editor.accessibilitySupport": "off",
	"emmet.preferences": {},
	"emmet.includeLanguages": {
		"\"javascript\"": "\"javascriptreact\""
	},
	"[html]": {
		"editor.defaultFormatter": "vscode.html-language-features"
	},
	"liveServer.settings.useLocalIp": true,
	"liveServer.settings.fullReload": true,
	"[sql]": {
		"editor.defaultFormatter": "mtxr.sqltools"
	},
	"editor.acceptSuggestionOnEnter": "smart",
	"editor.snippetSuggestions": "top",
	"breadcrumbs.enabled": false,
	"editor.detectIndentation": false,
	"editor.formatOnSave": true,
	"prettier.tabWidth": 4,
	"prettier.useTabs": true,
	"material-icon-theme.folders.theme": "specific",
    "workbench.productIconTheme": "a-file-icon-vscode-product-icon-theme",
    "editor.fontLigatures": true,
    "editor.fontVariations": false,
    "editor.fontFamily": "Lilex Nerd Font, Menlo, Monaco, 'Courier New', monospace"
}

Reproduction URL

n/a

Describe your issue

Tailwindcss Intelisense still needs a tailwind.config.js file however Tailwind 4 doesn't recommend using one in favor of the '''@import "tailwindcss";''' in the CSS file. With current recommended configuration, IntelliSense doesn't work at all.

[octave]

Yes it would be nice to activate it without requiring the now optional tailwind.config.js.

[thecrypticace]

Tailwindcss Intelisense still needs a tailwind.config.js file

It does not. In a bare bones project it'll activate just fine with v4 without a config file. If it's not activating that's a bug.

Mind opening your project and posting the output from "Tailwind CSS: Show Output"?

[danwetherald]

I also am required to add an empty tailwind.config.js in order to get this to work within nvim.

[octave]

@thecrypticace Here it is, using in a rails@8.0.1 project with the gem tailwindcss-rails@4.0.0.rc2 (I updated the paths for readability):

Locating server…
Checking if /app/assets/tailwind/application.tailwind.css may be Tailwind-related…
Booting server...
Setting up server…
Listening for messages…
Searching for Tailwind CSS projects in the workspace's folders.
{"tailwind":{"version":"3.4.4","features":["layer:base","separator:root","content-list","jit","css-at-config-as-project","relative-content-paths","transpiled-configs"],"isDefaultVersion":true},"path":"/public/assets/application.tailwind-ee41ae41.css"}
{"tailwind":{"version":"3.4.4","features":["layer:base","separator:root","content-list","jit","css-at-config-as-project","relative-content-paths","transpiled-configs"],"isDefaultVersion":true},"path":"/app/assets/tailwind/application.tailwind.css"}
[Global] Creating projects: []
[Global] Preparing projects...
[Global] Initializing projects...
[Global] Initialized 0 projects
[Info  - 10:41:19 AM] [GLOBAL] No matching project for document {
  fsPath: '/app/views/pos/index.html.erb',
  normalPath: '/app/views/pos/index.html.erb'
}

[thecrypticace]

Oooooh okay. You're using the Standalone CLI with Rails and the bundled Tailwind CSS version in IntelliSense is still v3.4. I'll have to come up with a solution to bundle both and pick the right one when its not installed via npm.

As a short term workaround you can npm install tailwindcss@latest and it should work.

[octave]

@thecrypticace got it! I have it posted here too for reference: rails/tailwindcss-rails#450 (comment)

[thecrypticace]

@danwetherald @dlongz Are you both also using rails?

[cb911nr]

Came looking for this, had the same problem..

Installed vite with react...
edited vite.config.js to include tailwind...

intellisense didn't work until I added the optional tailwind.config.js (and it's blank)

[thecrypticace]

@cb911nr Did you create a CSS file that imports tailwindcss / edit the existing one?

If you did and it still didn't pick it up mind opening a separate issue with the steps you took?

[dlongz]

Tailwindcss Intelisense still needs a tailwind.config.js file

It does not. In a bare bones project it'll activate just fine with v4 without a config file. If it's not activating that's a bug.

Mind opening your project and posting the output from "Tailwind CSS: Show Output"?

So i was able to get it to work by including a basic tailwind.config file. I didnt need to add any experimental flags or point it to the config file.

While trying to get the output from Tailwind CSS i deleted the tailwind.config file. But after deleting it the intellisense still work.

I'll creat a new project without the tailwind.config to replicate the bug and post the output from that project.

[dlongz]

@danwetherald @dlongz Are you both also using rails?

No not rails. Just react19 via vite.