tailwindcss-intellisense
tailwindcss-intellisense copied to clipboard
Intellisense not working on Windows for some projects / setups (v0.12.x)
Maintainer's note:
v0.12.2 has been published please update and give it a test first
What version of VS Code are you using? v1.90.2
What version of Tailwind CSS IntelliSense are you using? v0.12.0
What version of Tailwind CSS are you using? v3.4.4
What package manager are you using? npm
What operating system are you using? Windows
Tailwind config
import defaultTheme from "tailwindcss/defaultTheme";
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./resources/views/**/*.blade.php",
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
"./vendor/laravel/jetstream/**/*.blade.php",
"./storage/framework/views/*.php",
],
theme: {
extend: {
fontFamily: {
sans: ["Figtree", ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [forms, typography],
};
VS Code settings
previous version works so I don't really wanna spend time to remove unrelated stuff from it.
Describe your issue After last vscode extension update, it stoped working.
Same for me, I noticed not every project stopped working, but every monorepo project has stopped working.
Just wasted 2 hours trying to figure this out...
I have the same issue, it works in 0.10.5 but the latest one
I have the same issue. It doesn't work in 0.12.0 on my window 11.
I'm having the same issue with v0.12.0 on Windows. Rolling back to v0.10.5 worked for me.
I experienced the same issue for the updated v0.12.0, at first, I thought it was a conflict from other extensions, Rolling back to v0.10.5 solved the problem. OS(windows 10) (VS Code version 1.90.2)
Same for me: v0.12.0 does not work (Windows 10 + Dev containers), VS Code 1.90.2
Version 0.10.5 works
Me too: v0.12.0 does not work on network drives. VS Code 1.90.2. v0.10.5 works fine
Same for me with 0.12.0, had to downgrade to 0.10.5 to get it working again
downgrade it an older version it worked for me. wasted like 5 hours of time figuring this bug out
For me it broke the little preview that shows what CSS is applying, when you hover over the class.
I didn't know how much I rely on that.
vscode 1.88.* not working vscode 1.90.2 not working
Mine's also not working with version 0.12.0, downgrade to 0.10.5 solve the problem for now
for me also its not working
I have the same problem. 0.10.5 intellisense is working but only in the folder that contains the tailwind.config.ts file. I have a monorepo where tailwind.config.ts is located in apps/web, but now using 0.10.5 the autocomplete and hover class translation only work for apps/web. Files in ui are taking the classes but neither autocomplete nor hover class translation are working.
content: [
'./app/**/*.{js,jsx,ts,tsx}',
'../../packages/ui/**/*.{js,ts,jsx,tsx}',
'../docs/stories/*.{ts,tsx,js,jsx}',
],
File in packages/ui
Looking at the log output of v0.12.0 this seems like it's due to path normalization which should be fixed by #980.
I'm working on pushing out a release with that fix right now
v0.12.1 has been published please give it a test
Added a note to try the update in the original issue/comment at the top
@thecrypticace 0.12.1 is working thank you, but do you have any advice to debug why autocomplete not working in other packages outside where tailwind.config.ts is defined?. I don't know when it stopped working but yesterday I saw it's not working anymore. I think a month ago it was working well, any ideas? Thank you
If you find you're still not getting IntelliSense on Windows with v0.12.1 double check that the folder path used when opening VSCode matches what's on disk. If those don't match then this extension, and many others probably, won't work correctly.
When I first ran into this issue I was opening my workspace from GitHub Desktop which had a path casing that didn't match what was on disk. GitHub Desktop had c:\dev\project but on disk it was c:\Dev\Project.
I ran into this a second time with my pinned workspace in the task bar. Right click on the VSCode icon and hovering over my pinned workspace showed casing that also didn't match what was on disk. Un-pin, re-open, re-pin the workspace and everything worked again.
@ndozhh I would've assumed it was a bug in v0.12.x that's causing it but given that you mentioned that it's also broken in v0.10.5 — maybe a VSCode update? I'm not sure. I would check what @xt0rted mentioned and see if you see anything different there.
Any chance you can provide a reproduction repo that I can look at? Intellisense issues are notoriously complicated (and sometimes impossible) to debug without them.
I'm going to look into this and see if I can figure out a workaround for the casing-difference behavior because it's rather unfortunate. Only problem is some filesystems are case-sensitive (kinda wish they all were tbh) and some are not so I can't just blindly lowercase everything.
0.12.1 fixed it for me
🙌 🙌 fantastic. I'll leave this issue open for another day and if more people report in that it's fixed I'll close it.
0.12.1 fixed it for me
same
EDIT: alright so after some digging, i can confirm my settings still work for version 0.12.0. the most recent patch update to 0.12.1 stuffs it up. The key difference between the VSCode extension outputs between both versions is that they both attach watch processes to all the below patterns without issue, but only 0.12.0 recognizes the custom names root config and runs the follow-on initialization scripts...the below scripts are not run with the new 0.12.1
[tailwind-workspace-preset.ts] Initializing...
[tailwind-workspace-preset.ts] supported features: ["layer:base","separator:root","content-list","jit","css-at-config","relative-content-paths","transpiled-configs"]
[tailwind-workspace-preset.ts] Loaded tailwindcss v3.4.4: F:\[omitted]\node_modules\.pnpm\[email protected][email protected]_@[email protected]_@[email protected]__@[email protected][email protected]_\node_modules\tailwindcss
[tailwind-workspace-preset.ts] Loaded Tailwind CSS config file: f:/[omitted]/tailwind-workspace-preset.ts
[tailwind-workspace-preset.ts] Loaded postcss v8.4.38: F:\[omitted]\node_modules\.pnpm\[email protected]\node_modules\postcss
[tailwind-workspace-preset.ts] Building...
mines cactus still. nx monorepo, been working smoothly all year till this new version. i have a root workspace config file that all app configs inherit from. i have a common ui folder that inherits from the workspace tailwind config, and any files within the apps or libs namespaced below have their appropriate tailwind configs. Im running a windows OS.
vscode settings
"tailwindCSS.experimental.configFile": {
"tailwind-workspace-preset.ts": ["libs/common/ui/**"],
"apps/app-1/app/tailwind.config.ts": ["apps/app-1/app/**", "libs/app-1/**"],
"apps/app-2/app/tailwind.config.ts": ["apps/app-2/app/**", "libs/app-2/**"],
"apps/app-3/tailwind.config.ts": ["apps/app-3/app/**", "libs/app-3/**"]
},
"tailwindCSS.classAttributes": ["class", "className", ".*Styles.*"],
"tailwindCSS.experimental.classRegex": [
["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
],
"tailwindCSS.files.exclude": [
"**/.git/**",
"**/dist/**",
"**/node_modules/**",
"**/.nx/**",
"**/.husky/**",
"**/pnpm-lock.yaml"
]
prettier
{
"arrowParens": "always",
"bracketSameLine": false,
"bracketSpacing": true,
"endOfLine": "auto",
"printWidth": 100,
"tabWidth": 2,
"singleQuote": false,
"trailingComma": "all",
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindConfig": "tailwind-workspace-preset.ts",
"tailwindFunctions": ["tv"]
}
@ndozhh I would've assumed it was a bug in v0.12.x that's causing it but given that you mentioned that it's also broken in v0.10.5 — maybe a VSCode update? I'm not sure. I would check what @xt0rted mentioned and see if you see anything different there.
Any chance you can provide a reproduction repo that I can look at? Intellisense issues are notoriously complicated (and sometimes impossible) to debug without them.
I'm going to look into this and see if I can figure out a workaround for the casing-difference behavior because it's rather unfortunate. Only problem is some filesystems are case-sensitive (kinda wish they all were tbh) and some are not so I can't just blindly lowercase everything.
@thecrypticace It's working now. The solution was to add an empty tailwind.config.ts file and a postcss.config.js file to my packages/ui and autocomplete works well now. I don't know why it was working before without those. Btw I tried this after having created the reproduction you asked for and notice it was working there. Thanks for the help!
v0.12.1 has been published please give it a test
It's working, Thanks
@binaryartifex Can you provide the output that does get logged when running v0.12.1? Also are you on a network drive at all?
Updating to v0.12.1 fixed intellisense for me. I had downgraded from v0.12.0 back to v0.10.5 and intellisense was working. I updated to v0.12.1 and restarted extensions but was still broken. Intellisense didn't start working again until I completely closed and re-opened VSCode.