discuss

discuss copied to clipboard

Hi there,

the more I'm using Tailwind, the more I'm convinced it's here to stay in my workflow. This leads to another challange: I need a way for myself and my team to enforce our CSS complies with our coding guidelines. One thereof being we're having a defined order in which CSS properties have to be written.

When we're using @apply to extract components we're getting a lot of "properties" that are not affected by any linter. I just switched from Sass-Lint to Stylelint (and the stylelint-order plugin), as it is way more configurable than Sass-Lint. But I still didn't find a way to create rules to enforce a desired sort order for classes that are "@applied".

I'm wondering if anybody else ran into the task yet or maybe there's even a solution to this.

Linting has been an pain point for me and my team as well. I have searched for a solution but no luck yet.

Hope this gets more attention :)

Anyone managed to find a solution to this yet? Like with @mkromann, this is bit of a pain for our team and teaching a junior. A solution would be great!

I've spent the last 10 hours looking for an answer to this question. I'm hoping there is some canonical answer somewhere, but so far I haven't found anything. There seem to be some relevant configuration options in VSCode's user/workspace settings to help with this.

I use NeoVim and I've gone through 3 different completion/linting frameworks trying to get some combination of linting + syntax highlighting - 'unknown at-rule'.

In my .stylelintrc.json file, I've included the following rule, which ought to be the silver bullet:

"rules": {
    "at-rule-no-unknown": [ true, {
        "ignoreAtRules": [
            "extends",
            "apply",
            "tailwind",
            "components",
            "utilities",
            "screen"
        ]
    }],
. . .
}

If anybody has any idea of how to deal with this, I'm all ears.

Here's what my .stylelintrc.js looks like:

module.exports = {
  extends: [
    'stylelint-config-standard',
  ],
  rules: {
    'at-rule-empty-line-before': [
      'always', {
        except: ['blockless-after-blockless', 'blockless-after-same-name-blockless', 'first-nested'],
        ignore: ['after-comment', 'inside-block'],
        ignoreAtRules: ['apply', 'screen', 'font-face', 'nest'],
      },
    ],
    'at-rule-no-unknown': [
      true, {
        ignoreAtRules: ['tailwind', 'variants', 'responsive', 'apply', 'screen'],
      },
    ],
    'property-no-unknown': [
      true, {
        ignoreProperties: ['font-path']
      },
    ],
    'selector-nested-pattern': '^&',
  },
}

Do you have an example of the code you want your linter to consider okay? Might be able to tweak the config so it works.

I use stylelint in PhpStorm with a pretty identical config to yours:

"stylelint": {
    "extends": "stylelint-config-recommended",
    "rules": {
      "at-rule-no-unknown": [
        true,
        {
          "ignoreAtRules": [
            "tailwind",
            "apply",
            "responsive",
            "variants",
            "screen"
          ]
        }
      ]
    }
  },

I specify mine in my package.json directly as opposed to being in a stylelintrc file...

this does the job with vscode

{
  "extends": [
    "stylelint-config-recommended"
  ],
  "rules": {
    "at-rule-no-unknown": [true, {
      ignoreAtRules: [
        /apply/, 
        /tailwind/,
        /screen/,
        /if/,
        /else/,
        /return/,
        /function/,
	/debug/
      ]
    }],
    "declaration-block-trailing-semicolon": null,
    "no-descending-specificity": null
  }
}

the only difference i can see if the slashes

In addition to the suggestions above, you could write a plugin for stylelint. I’d be happy to help.

Note for anyone else coming to this, I found I was enabling Stylelint and Disabling the default CSS linting as follows:

"stylelint.enable": true,
"css.validate": false

And it still wasn't working. But I blanked I was working in .scss files. This line saved the day and has made working in Sass beautiful again:

"scss.validate": false

EDIT: just came back here after a new MacBook install. This still worked a dream for me.

Here's a short guide on how to configure vscode linting for Tailwind.

I use stylelint in PhpStorm with a pretty identical config to yours:

"stylelint": {
    "extends": "stylelint-config-recommended",
    "rules": {
      "at-rule-no-unknown": [
        true,
        {
          "ignoreAtRules": [
            "tailwind",
            "apply",
            "responsive",
            "variants",
            "screen"
          ]
        }
      ]
    }
  },

I specify mine in my package.json directly as opposed to being in a stylelintrc file...

@jalendport is there something else you need to disable/enable in PHPstorm as I have copied this config but I am still getting errors about 'Unknown CSS at rule'. I tried it with a stylelintrc file and then tried it as you had if in the package.json file but still seeing these errors.