dbarjs
5/15/2020 - 3:08 AM

Tailwind Stylelint

Guide: https://www.meidev.co/blog/visual-studio-code-css-linting-with-tailwind/

Install the stylelint vscode extension:

ext install stylelint.vscode-stylelint

Install recommended configuration:

// in project:
yarn add stylelint-config-recommended
// global:
yarn global add stylelint-config-recommended

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

module.exports = {
  // add your custom config here
  // https://stylelint.io/user-guide/configuration
  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
  }
}

Disable vscode default CSS linting

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