Visual Studio Code CSS linting with Tailwind

27 June, 2019

This is a short guide on how to setup Visual Studio Code (vscode) CSS linting with Tailwind CSS.

Are you tired of getting errors like this with vscode and Tailwind CSS?

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 stylelint

Step 1: Disable CSS validate

Or with the command line:

code --install-extension shinnn.stylelint

Step 2. Add a stylelint configuration file.

Add styleling.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.

Step 1: Disable CSS validate

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.