DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for VSCode + Stylelint + Tailwind CSS = β™₯️
Oliver Andrich
Oliver Andrich

Posted on • Updated on • Originally published at andrich.me

VSCode + Stylelint + Tailwind CSS = β™₯️

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

Top comments (0)

πŸ‘‹ Welcome new DEV members in our Welcome Thread

Say hello to the newest members of DEV.