DEV Community

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

VSCode + Stylelint + Tailwind CSS = ♥️

oliverandrich profile image Oliver Andrich Originally published at andrich.me 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
Enter fullscreen mode Exit fullscreen mode

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,
  },
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Resources & Credits

Discussion

pic
Editor guide