Visual Studio Code CSS linting with Tailwind

Getting errors like this with Tailwind and Visual Studio Code?

at-rule or selector expected css(css-ruleorselectorexpected)
semi-colon expected css(css-semicolonexpected)
Unknown at rule @tailwind css(unknownAtRules)

Here’s how to solve it.

Step 1. Install the stylelint vscode extension

Open up the Extensions control and install the stylelint extension.

Or with the command line:

code --install-extension shinnn.stylelint

Step 2. Add a stylelint configuration file.

Add stylelint.config.js to your project with this content:

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

Install recommmended config

If you want you can install the stylelint recommended config.

Install in project

npm install stylelint-config-recommended --save-dev

Install global

npm install stylelint-config-recommended --global

Add it to your stylelint.config.js:

module.exports = {
  extends: ['stylelint-config-recommended']
  rules: {
    ...
  }
}

Optional configuration in vscode

There is also an option to configure stylelint in vscode settings, but it’s not recommend as that will override the config in the project your are working on. You can read more in the stylelint extension documentation.

Step 3. Disable vscode’s default CSS linting

Open up vscode’s settings and search for css validate. Disable CSS: Validate - Enables or disables all validations.

If you are using a preprocessor like SCSS or Less you also want to turn default validations for these off and let stylelint take care of it.

And that’s it. Enjoy vscode with Tailwind.

And by the way, if you haven’t already I highly recommend you install the excellent vscode extensions Tailwind CSS IntelliSense by Brad Cornes to get class name completion.