I'm new to LWC and VS Code. I've installed the recommended salesforce extension package which has SLDS Validator in it. But in my html file, it is showing blue squiggly lines under the SLDS class which is actually a valid class provided by salesforce.

enter image description here

Am I missing something here in settings? Or what do I need to take action to get rid of this. Please someone advise.

1 Answer 1


SLDS recommends using variable density classes so when you use slds-p-around__medium, It recommends using slds-var-p-around__medium. Because of this you are getting this line. This line appears if there is any error/recommendation by any extension. If you hover over that statement you will get message for that line

  • It's not causing any issue actually. Also the lwc is already an existing one which works perfectly. After retrieving the source, I'm seeing these squiggly lines.
    – sfdcOwl
    Commented Jul 6, 2021 at 10:56
  • This is not an issue. This is just a suggestion by SLDS Validator extension to use slds-var-p-around__medium. You are seeing this lines as suggestions by extension.
    – Aniket
    Commented Jul 6, 2021 at 11:00
  • Though I tried the quick fix suggested on hovering, still the lines are there
    – sfdcOwl
    Commented Jul 6, 2021 at 11:14
  • The quick fix doesn't work quite right yet, if you add the -var- in the class, it will vanish the warnings. Commented Jul 6, 2021 at 12:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .