Fixing Tailwind VS Code linting errors

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!

1. 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
}

1. 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

1. 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
  }
}

Comments

[Rense Bakker]

Another way to easily solve this, is to switch to a css in js library, since js linting doesn't require extra magic to make it work and tailwind doesn't add anything to your project except long className properties. Not to mention tailwind can't do simple things, like use dynamic values, since it can't access anything in runtime except through ugly dom manipulation of css variables, which creates a horrible mess that nobody will understand in the future.