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

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>