loading...
Cover image for VSCode + Stylelint + Tailwind CSS = ♥️

VSCode + Stylelint + Tailwind CSS = ♥️

oliverandrich profile image Oliver Andrich Updated on ・1 min read

Today I wrote a post about adding Tailwind CSS to a Phoenix project. In that post I left out how to set up Stylelint, Tailwind CSS and Visual Studio Code together. In this article we would like to make up for this.

Install Stylelint

First off we need to install Stylelint itself and a package containing a reasonable standard configuration.

npm install --save-dev stylelint stylelint-config-standard

Create a Stylelint config

Place a file named stylelint.config.js with the following content into the root folder of your project.

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

Install Visual Studio Code extensions

Next up, you need to install two extensions for Visual Studio Code.

Tweak Visual Studio Code settings

Finally, you have to put these three lines into your settings.json of Visual Studio Code. They disable all built-in CSS validations. These are now handled by Stylelint.

"css.validate": false,
"less.validate": false,
"scss.validate": false

Resources & Credits

Posted on by:

oliverandrich profile

Oliver Andrich

@oliverandrich

Loves coffee, code and a good conversation.

Discussion

pic
Editor guide