No intellisense in .NET 8 Blazor WASM
Closed this issue · 16 comments
Visual Studio Community Preview 17.9.0 preview 1.0
Tailwind CSS VS2022 Editor Support 1.1.8.7
Tailwind 3.3.5
Node 18.12.1
Npm 8.19.2
No Tailwind classes are being shown in IntelliSense
Here is my tailwind.config.js
When i tried to use the classes that appeared is the ones that are in css\app.css but the tailwind classes don't appear
I already tested with .NET 7 and the non-preview version of visual studio but the same happened
Noticed that in app.css file the intellisense works fine, but only in this file.
Also, the hover to see what witch class do works as well.
Ah good it's not just me!
Also the button to initialize is gone:
Are there any errors being logged to the Extensions output window?
Thanks!
Are there any errors being logged to the Extensions output window?
Thanks!
I couldn't find this Extensions output windows sorry, can you show me how do i open this window?
No worries, it's located in the dropdown menu on the same window as the Build and Debug output, but it doesn't show up if there are no errors. Since you said the issue still persists with VS 17.8 I'll see if I can repro there.
@DylanSnel Thanks, it sounds like there is actually a bug with how the configuration file is parsed in the extension. I should be able to address that in the next release.
System.InvalidOperationException: Error occurred while parsing configuration file: C:\Repos\Slyng\node_modules\tailwind-scrollbar\src\index.js:12
tailwind.addBase(BASE_STYLES);
^
TypeError: tailwind.addBase is not a function
at C:\Repos\Slyng\node_modules\tailwind-scrollbar\src\index.js:12:12
at Object.<anonymous> ([stdin]:4:50)
at JSON.stringify (<anonymous>)
at [stdin]:2:10
at Script.runInThisContext (node:vm:128:12)
at Object.runInThisContext (node:vm:306:38)
at node:internal/process/execution:83:21
at [stdin]-wrapper:6:24
at runScript (node:internal/process/execution:82:62)
at evalScript (node:internal/process/execution:104:10)
Node.js v19.5.0
at TailwindCSSIntellisense.Configuration.ConfigFileParser.<GetConfigJsonNodeAsync>d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at TailwindCSSIntellisense.Configuration.ConfigFileParser.<GetConfigurationAsync>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at TailwindCSSIntellisense.Configuration.CompletionConfiguration.<ReloadCustomAttributesAsync>d__39.MoveNext()
This is the error i got, with this config file:
/** @type {import('tailwindcss').Config} */
const colors = {
orange: {
DEFAULT: '#FFAE70',
hard: '#FF6E00',
soft: '#FFC599',
50: '#FFFFFF',
100: '#FFFFFF',
200: '#FFF3EA',
300: '#FFDCC2',
400: '#FFC599',
500: '#FFAE70',
600: '#FF8E38',
700: '#FF6E00',
800: '#C75600',
900: '#8F3E00',
A100: '#FFFFFF',
A200: '#FFFFFF',
A400: '#FFF0E9',
A700: '#FFDFCF',
},
purple: {
DEFAULT: '#9567D0',
hard: '#291542',
soft: '#C9B1E7',
50: '#FFFFFF',
100: '#F4EFFA',
200: '#DED0F0',
300: '#C9B1E7',
400: '#B392DD',
500: '#9567D0',
600: '#773DC2',
700: '#5D2F97',
800: '#43226D',
900: '#291542',
A100: '#FFFFFF',
A200: '#FFFFFF',
A400: '#E2CFFF',
A700: '#D2B6FF',
},
white: '#FFFFFF',
};
module.exports = {
content: [
'../**/*.{razor,html,css}',
'../../Clients.Common/**/*.{razor,html,css}'
],
theme: {
extend: {
colors: {
primary: colors.purple,
secondary: colors.orange,
onprimary: colors.white,
onsecondary: colors.white,
'slyng-orange': colors.orange,
'slyng-purple': colors.purple,
},
animation: {
indeterminate: 'indeterminateAnimation 1s linear infinite',
},
fontFamily: {
'body': ['Nunito Sans', 'system-ui', 'sans-serif'],
'title': ['Mukta', 'system-ui', 'sans-serif'],
'header': ['Cairo', 'system-ui', 'sans-serif'],
},
fontSize: {
title: `2.5rem`,
header: `1.5rem`,
body: `1.1rem`
},
keyframes: {
indeterminateAnimation: {
'0%': { transform: 'translateX(0) scaleX(0)' },
'40%': { transform: 'translateX(0) scaleX(0.4)' },
'100%': { transform: 'translateX(100%) scaleX(0.5)' },
},
wiggle: {
'0%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' },
'100%': { transform: 'rotate(-3deg)' },
}
},
boxShadow: {
'inner-xl': 'inset 0 4px 4px 0 rgb(0 0 0 / 0.6);',
},
transitionProperty: {
height: 'height',
},
gridTemplateColumns: {
cards: 'repeat(auto-fit, minmax(240px, 1fr))',
},
gridAutoRows: {
cards: 'minmax(240px, max-content)',
},
},
},
plugins: [
require('tailwind-scrollbar'),
require('@tailwindcss/container-queries')
],
}
@DylanSnel Thanks for providing them! It definitely looks like the extension is parsing the plugins incorrectly, but the error should be fixed now in the latest release.
No worries, it's located in the dropdown menu on the same window as the Build and Debug output, but it doesn't show up if there are no errors. Since you said the issue still persists with VS 17.8 I'll see if I can repro there.
Really sorry for take this much to reply, last week was intense. Anyways i think that no errors are appearing because the Extension output it's not there, but the problem persists i really don't know why, it was working then simply just stopped, and now not even the setup tailwindcss is showing as well, but i dont know how to provide you more details on this problem
No worries, it's located in the dropdown menu on the same window as the Build and Debug output, but it doesn't show up if there are no errors. Since you said the issue still persists with VS 17.8 I'll see if I can repro there.
Really sorry for take this much to reply, last week was intense. Anyways i think that no errors are appearing because the Extension output it's not there, but the problem persists i really don't know why, it was working then simply just stopped, and now not even the setup tailwindcss is showing as well, but i dont know how to provide you more details on this problem
I have exactly this issue. I tried to download your code and debug it. In my exact same code when debugging the code it worked, however when i open the exact project without the debugging environment it failed
Sorry for the late response! It sounds like the extension just isn't starting up at all--I'd try removing and reinstalling the extension to see if it restores behavior. If you've already done that, try and double check that the extension is not disabled in the Options > Tailwind CSS IntelliSense settings menu.
Sorry for not interacting with this issue for so long, but just to clarify if someone else has this problem, i just uninstalled visual studio and installed again and worked just fine.
Thanks for the attention and this awesome project.
No way!!! i struggled with this so much and a repair of my visual studio did the trick