How to Get Rid of These SASS Linting Errors When Using Tailwind-CSS

How do you get rid of these SASS linting errors when using Tailwind-CSS?

Solution for both .css and .scss

1. At the root level of your project, update or create a dir .vscode with a file settings.json:

2. Add the following to .vscode/settings.json:

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

3. Install the vscode-stylelint extension

4. install stylelint-config-standard:

npm i stylelint-config-standard -D

5. create a stylelint.config.js file at the root level and add:

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

6. restart vsCode

Results:

You get rid of these SASS linting errors when using Tailwind-CSS and keep doing css validation with stylelint.

Unknown at rule @tailwind CSS in reactjs

Make sure to install PostCSS Language Support, extension found in the VSCODE.
That will remove the error that is displaying.

@apply rule is compatible with postCSS: https://github.com/tailwindcss/tailwindcss/issues/325

VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=csstools.postcss

How to fix eslint/prettier Parsing error: ';' expected for .css file?

After a bit more research, I found out that my eslint command was the issue:

yarn eslint src/**

This included .css, .json, etc. files even though my eslintrc was correctly configurated. By switching to this function, the issue no longer occurs:

yarn eslint --ext js,jsx,ts,tsx src

---

Related Topics