search

tailwindlabs / tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
2.84k stars 195 forks source link

Couldn't show SCSS/CSS suggestions because of @screen #438

Closed arekuki closed 2 years ago

arekuki commented 2 years ago

What version of Tailwind CSS IntelliSense are you using?

v0.7.2

What version of Tailwind CSS are you using?

2.2.19

What package manager are you using?

npm, gulp

What operating system are you using?

Windows 10

Reproduction URL

none

Describe your issue

Couldn't show SCSS / CSS suggestions because of @screen main scss - _aks-starter-project - Visual Studio Code2

Works to show SCSS / CSS suggestions without @screen main scss - _aks-starter-project - Visual Studio Code

Waiting for an answer

arekuki commented 2 years ago

Anyone have an answer?

bigmike36c commented 2 years ago

I'm having similar issues as detailed in #428. However, since I solved the directive highlighting issue with an extension, I closed #428 and wanted to consolidate the feedback in regards to issues with hover information and intellisense suggestions when using @screen.

Normal Property Hover Behavior: image

No Hover Information Inside @screen Directive: image

No Hover Information on @screen Directive: image

Additionally, some autocomplete options appear when typing but is limited to "Text" autocompletion as opposed to the "Properties and Attributes" or "Constants" autocompletion (vscode defines types of completions here) you would typically see in a standard .css/.scss files (for properties and attributes) or an .html file (for tailwind class constants). The difference is shown below:

Normal Properties and Attributes Autocomplete in .css/.scss Files: image

Normal Tailwind Constants Autocomplete in .html Files: image

Unexpected Text Autocomplete in .css/.scss Files: image

Finally, this issue is not present when using @apply in .css/.scss files leading me to believe that perhaps we can not use the @screen directive with standard CSS. Can anyone confirm?

image

bigmike36c commented 2 years ago

I wanted to post a quick workaround for anyone who stumbles across this issue. You can replace @screen xl with @media (min-width: theme('screens.xl')) to provide suggestions with standard css/scss. Obviously much more verbose, but this allows you to continue to use the tailwind.config to control breakpoints while maintaining intellisense functionality.

arekuki commented 2 years ago

Thanks for the answer. It is possible to replace @screen xl with @media (min-width: theme('screens.xl')).

bigmike36c commented 2 years ago

@arekuusa Even with the workaround, I would consider leaving this issue open until a maintainer can confirm that behavior we experienced is the intended behavior.

arekuki commented 2 years ago

Okay, for now, leave it open

bradlc commented 2 years ago

Hey @arekuusa. I am unable to view your joxi.ru links, but I think I understand the problem, and it's the same as #253: CSS IntelliSense does not work when nested inside Tailwind at-rules (e.g. @screen, @layer). I'm going to close this issue in favour of that one.

arekuki commented 2 years ago

Hey @bradlc , I changed the links to pictures. Look here please. I read #253. Is the @screen directive not highlighted when using SCSS?