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

Question

I'm trying to use Tailwindcss @apply directive in a <style> tag of a Nuxt.js 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:

<style scoped>

.title {
  @apply text-orient font-light block text-5xl pt-2;
}

.message {
  @apply font-light pb-4 text-orient text-2xl text-blue-bayoux
}
</style>

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.

Answer 2

Disable Vetur's style validation

Such CSS warnings may originate from the Vetur extension, which may very well be the case if the warning's icon (as seen in VSCode's "Problems" pane) is a Vue logo.

By disabling Vetur's style validation, you may lose other benefits. Although, in the long-run, it's probably better to rely on a more full-featured validator/linter than this extension.

1. Go to the Vetur extension settings and uncheck the option for style validation.

--- or ---

2. Set the option per-project, in a .vscode/settings.json file in the project root, with the following:

   "vetur.validation.style": false

---

Vetur warnings look something like:

Answer 3

I found another solution Usage of Tailwind with nuxt lead to weird @apply issue #300

Just add lang="postcss" to style tag and with this fix, I haven't any error.

<style lang="postcss" scoped>
  .title {
      @apply text-purple-600 font-bold;
  }
</style>

Answer 4

i think you are using prettier and that plugin get error when you make @apply in one line so try this:

<style scoped>
.title {
  @apply text-orient;
  @apply font-light;
  @apply block;
  @apply text-5xl;
  @apply pt-2;
}

.message {
  @apply font-light;
  @apply pb-4;
  @apply text-orient;
  @apply text-2xl;
  @apply text-blue-bayoux;
}
</style>

Answer 5

2 Steps

1. Add the lines below into: .vscode > settings.json

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

2. Install StyleLint Extension

https://marketplace.visualstudio.com/items/shinnn.stylelint

Restart, it's done!

Answer 6

I had the same problem with Nuxt and the solution was to follow the steps in this blog, the TL:DR is:

1. Install the stylelint vscode extension
2. Add this configuration in your stylelint.config.js

rules: {
   'at-rule-no-unknown': [
     true,
     {
       ignoreAtRules: [
         'tailwind',
         'apply',
         'variants',
         'responsive',
         'screen',
       ],
     },
   ],
   'declaration-block-trailing-semicolon': null,
   'no-descending-specificity': null,
 },

3. In the vscode configuration uncheck the option css validate or add this to your vscode settings.json file "css.validate": false

with this steps all will work perfect.

Just in case, I had a problem with the prettier formatting too, and it was fixed with this option in my vscode settings.json file "vetur.format.defaultFormatter.html": "prettier",

Answer 7

Try adding the extension PostCSS Language Support; it adds support for modern and experimental CSS within Visual Studio Code.

Answer 8

I use VS Code and added the following to my settings:

"files.associations": {
  "*.vue": "html"
}

Afterwards, the error was gone.