How to solve semi-colon expected css(css-semicolonexpected)

Question

I'm trying to use Tailwindcss '@apply' directives in a tag of a Nuxtjs Vue file; everything works fine, but I keep getting some annoying red squiggly lines. Please, guys, I need help... Thank you! Below is a screenshot and a snippet:

Screenshot

Answer 1

There is no built-in way to solve this within VS Code. The recommended way to solve this is by making use of the Stylelint extension to handle your CSS linting (& SCSS and/or Less, etc.). It's very powerful and likely will improve your stylesheets beyond removing these errors for you.

1. You need to add the styleint dependencies to your project. Run:

npm install --save-dev stylelint stylelint-config-standard

yarn add -D stylelint stylelint-config-standard

2. Create a stylelint.config.js in the root of your project. (same location where your package.json is stored)

Place this snippet into it:

module.exports = {
  extends: ["stylelint-config-standard"],
  rules: {
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
        ],
      },
    ],
    "declaration-block-trailing-semicolon": null,
    "no-descending-specificity": null,
  },
};

3. Install these extensions to your VS Code setup:

• Stylelint
• Tailwind CSS IntelliSense

4. Last but not least, adjust your local or global VS Code settings.json file to include:

"css.validate": false,
"less.validate": false,
"scss.validate": false,

This way you will have the native linting "disabled", but are still ensuring it is linted using the Tailwind IntelliSense plugin.