No intellisense in .NET 8 Blazor WASM

[gabrielfernandes-Smarthis]

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

[gabrielfernandes-Smarthis]

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.

[DylanSnel]

Ah good it's not just me!

Also the button to initialize is gone:

[theron-wang]

Are there any errors being logged to the Extensions output window?

Thanks!

[DylanSnel]

For me i got it working the missing toolbar was cause it haf automatically vreated a file i think.

I saw intellisense, but it failed on my own tailwind config untill i removed tailwind scroll bar plugin and tailwind container plugin. That or it is that i referenced my colors from json objects thag were defined in another object. I feel the intellisense started working with sone delay, so i dont know what triggered it to work. I could give more details tomorrow although it gave an error with tailwind scrollbar about 'tailwind.addbase(BASE_××××) is not a function' or sonrthing likr that

On Wed, Nov 22, 2023, 22:13 Theron Wang @.***> wrote:

Before you updated to 17.9, did everything work properly? Also, are there any errors being logged to the Extensions output window?

Thanks!

— Reply to this email directly, view it on GitHub https://github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/issues/26#issuecomment-1823511792, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEKVXQLKM7FMT64WJDZ3HGLYFZTH3AVCNFSM6AAAAAA7TKPA6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRTGUYTCNZZGI . You are receiving this because you commented.Message ID: <theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/issues/26/1823511792@ github.com>

[gabrielfernandes-Smarthis]

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?

[theron-wang]

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.

[theron-wang]

@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.

[DylanSnel]

Awesome man. This is so great

On Thu, Nov 23, 2023, 01:54 Theron Wang @.***> wrote:

@DylanSnel https://github.com/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.

— Reply to this email directly, view it on GitHub https://github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/issues/26#issuecomment-1823705343, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEKVXQO3HY5AHYKSCPDYTMDYF2NEZAVCNFSM6AAAAAA7TKPA6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRTG4YDKMZUGM . You are receiving this because you were mentioned.Message ID: <theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/issues/26/1823705343@ github.com>

[DylanSnel]

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')
    ],
}

[theron-wang]

@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.

[DylanSnel]

I do however struggle tp get the new dotnet 8 web app template working. I get some errors. Strangely enough when i donloaded your repo and debugged it with my own project it worked. But without debugging it doesnt seem to work.

I dont see the extension output window.

( this is with the plugins commented out)

On Sat, Nov 25, 2023, 01:25 Theron Wang @.***> wrote:

@DylanSnel https://github.com/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.

— Reply to this email directly, view it on GitHub https://github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/issues/26#issuecomment-1826165899, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEKVXQKCVKTKJ33MHNGBW7TYGE3I7AVCNFSM6AAAAAA7TKPA6KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMRWGE3DKOBZHE . You are receiving this because you were mentioned.Message ID: <theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/issues/26/1826165899@ github.com>

[gabrielfernandes-Smarthis]

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

[DylanSnel]

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

[theron-wang]

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.

[gabrielfernandes-Smarthis]

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.

[DylanSnel]

No way!!! i struggled with this so much and a repair of my visual studio did the trick