VSCode + Stylelint + Tailwind CSS = ♥️

Learn how to setup the combination of Visual Studio Code, Stylelint and Tailwind CSS.

Tailwind CSS Code

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