Name: Fixing Tailwind VS Code linting errors
Rating: 2.8 (444 reviews)
Author: mhcrocky

Fixing Tailwind VS Code linting errors

mhcrocky - Nov 9 '22 -

- Dev Community

When you are using Tailwind with VS Code you might run across a linting error in extracted styles.

Fear not here is how to fix it!

Create a workspace settings folder aka .vscode folder. Create it at the root of your project. Then add a settings.json file inside the folder with these options.

{
  "editor.formatOnSave": true,
  // Run Stylelint fix when you save the file
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  // Recommended config for the extension
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
}

Now we need a way to validate CSS since we disabled the native rules We are going to use a popular extension called Stylelint. Install the extension and let's add some recommended rules and plugins

yarn add stylelint stylelint-config-recommended-scss stylelint-order stylelint-scss --dev

Then create a .stylelintrc.json file at the root. Use these configurations

{
  "extends": "stylelint-config-recommended-scss",
  "plugins": ["stylelint-order", "stylelint-scss"],
  "rules": {
    "order/properties-alphabetical-order": true,
    "scss/at-rule-no-unknown": null,
    "scss/at-import-no-partial-leading-underscore": null,
    "selector-pseudo-class-no-unknown": null,
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen"
        ]
      }
    ],
    "declaration-block-trailing-semicolon": null,
    "no-descending-specificity": null
  }
}