Tailwind Intellisense not working after upgrading to v4 #1337
Comments
|
I'll be a bit hard for me to figure out all the steps necessary without a reproduction but a few things jump out at me immediately:
So first, re-organize your CSS file to look like this: @layer base,
tiptap,
custom.components,
custom.utilities,
overrides;
@import "tailwindcss";
@import "file_path" layer(tiptap);
@import "file_path" layer(custom.components);
@config "path_to_file/tailwind.config.js";
@layer base {
:root {
overflow: hidden;
@media (max-width: 768px) {
overflow: hidden scroll;
}
}
:where(*) {
@apply outline-0;
}
:where(:focus) {
@apply outline-0;
}
}
/* rest of layers */
I took a guess at where the layers should be and assumed you'd want to use the layers Tailwind CSS itself uses as a default: @layer theme,
base,
tiptap,
components,
custom.components,
custom.utilities,
/* Note: Putting the utilities layer between the above two won't work the way you'd probably expect because of how nested layers work in CSS */
utilities,
overrides;
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/base" layer(theme);
@import "tailwindcss/utilities" layer(theme);
@import "file_path" layer(tiptap);
@import "file_path" layer(custom.components);
@config "path_to_file/tailwind.config.js";
@layer base {
:root {
overflow: hidden;
@media (max-width: 768px) {
overflow: hidden scroll;
}
}
:where(*) {
@apply outline-0;
}
:where(:focus) {
@apply outline-0;
}
}
/* rest of layers */The last thing is if you open the command palette and run "Tailwind CSS: Show Output" you'll get some information that might help with debugging. If you still run into problems after fixing the above points I can try taking a look if I have those logs (or a reproduction — which would be preferable). Gonna close this one as it's quite likely just related to sass + the imports thing but feel free to comment if you're still having issues and I'll take another look |
What version of VS Code are you using?
v1.96.2
What version of Tailwind CSS IntelliSense are you using?
v0.14.16
What version of Tailwind CSS are you using?
v4.1.4
What package manager are you using?
yarn
What operating system are you using?
macOS
Tailwind config
Base tailwind config
tailwind config that imports base tailwind config
index.scss
VS Code settings
{ "workbench.colorTheme": "One Dark Pro Monokai Darker", "terminal.integrated.enableMultiLinePasteWarning": false, "explorer.confirmDelete": false, "python.linting.flake8Enabled": true, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "python.terminal.activateEnvironment": false, "editor.tabSize": 2, "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, "files.insertFinalNewline": true, "[python]": { "editor.formatOnType": true }, "[yaml]": { "javascript.preferences.quoteStyle": "single", "typescript.preferences.quoteStyle": "single", "editor.formatOnSave": false }, "dart.flutterSdkPath": "path_to_file/fvm/versions/3.13.8", "javascript.updateImportsOnFileMove.enabled": "always", "javascript.referencesCodeLens.enabled": true, "javascript.referencesCodeLens.showOnAllFunctions": true, "typescript.updateImportsOnFileMove.enabled": "always", "playwright.showTrace": true }workspace settings
{ "tailwindCSS.experimental.configFile": "path_to_file/index.scss", "editor.quickSuggestions": { "strings": true } }Reproduction URL
Don't have one currently
Describe your issue
Recently upgraded tailwind v3 to v4, using a structure of index.scss as the entry point and importing my old tailwind.config files to implement styles, tailwind classnames and styles are working in code but tailwind intellisense is not working even after setting the tailwindCSS.experimental.configFile setting. Does tailwindcss-intellisense not work in this scenario? Do I need to convert everything from my config files into index.scss for it to work?
The text was updated successfully, but these errors were encountered: