Intellisense works, but shows CSS errors

[nolawnchairs]

Hi,

The extension works as far as intellisense suggestions are concerned, but the actual CSS file is showing warnings with the @tailwind directive and errors on the class names after the @apply directive (but not on the @apply itself).

I've disabled all other CSS-related extensions and linters to no avail.
Using the latest version of the extension (0.2.0)
Using the latest version of code

[hacknug]

This is not an issue with the extension. Disable CSS validation if you don't want VSCode to complain about you using an invalid syntax for CSS: "css.validate": false

[nolawnchairs]

That hardly seems like a solution. Plenty of other extensions can coexist with formatters and linters when they introduce custom syntax or tags. The object is not to abandon all syntax-checking - it's like killing a fly with a shotgun. If it's all the same, I'd rather hear from someone involved in the project.

[hacknug]

Plenty of other extensions can coexist with formatters and linters when they introduce custom syntax or tags.

The thing is you're complaining about syntax issues in the repo of an extension that doesn't do anything related to syntaxes. It only gives you suggestions for classes generated by your Tailwind config file.

The object is not to abandon all syntax-checking - it's like killing a fly with a shotgun.

Never said that you shouldn't lint your CSS, only that you won't do it using the native css.validate or this extension. You either start using Stylelint and configure it so it doesn't complain about these things or you'll see them.

[supermacro]

I'm having the same issue, and there isn't any documentation in this repo to explain how to attain the same behaviour as illustrated in the extension's README. Here is what I'm seeing:

[ycs77]

Hey @gDelgado14

You can install this vscode extension: stylelint.

Edit 2020/08/09: update link

And add this setting:

{
  "css.validate": false,
  "stylelint.config": {
    "rules": {
      "at-rule-no-unknown": [true, {
        "ignoreAtRules": [
          "tailwind",
          "apply",
          "layer",
          "variants",
          "responsive",
          "screen"
        ]
      }],
      "declaration-block-trailing-semicolon": null,
      "no-descending-specificity": null
    }
  }
}

[bradlc]

I'm going to close this because as @hacknug said this is not an issue with the extension. Unfortunately (as far as I'm aware) extensions cannot hook into the built-in CSS validation that VS Code does (without registering an entirely new language mode). The suggestions from @hacknug and @ycs77 are both good options 👍 Alternatively you can install a postcss extension and set that as the default for CSS files:

"files.associations": {
  "*.css": "postcss"
}

[bbugh]

The stylelint link above is out of date, the extension was renamed to stylelint.vscode-stylelint in the v0.60.0 release.

The new link is https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

[dmzza]

I believe the right way to get rid of VS Code's CSS errors is to install language support for PostCSS, as suggested above. PostCSS Language Support looks like the best extension out there right now, and merely installing it will make it the default language for .css files. That's fine for projects that don't use PostCSS too, because:

PostCSS Language Support is derived from the native CSS Language Support built into Visual Studio Code

All you have to do is install it. No further configuration necessary.

[pranav-js]

this doesn't work for SCSS files unfortuantely

[Bishwas-py]

Giving

Semicolon or block is expected svelte(css-syntax-error)

[jldec]

Since #518 this extension can be configured to act as replacement for VS Code CSS IntelliSense.
See marketplace or README.

Use the files.associations setting to tell VS Code to always open .css files in Tailwind CSS mode:

"files.associations": {
  "*.css": "tailwindcss"
}