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

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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

Latest comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›