Stylelint Configuration for use with Tailwind CSS

When using Tailwind CSS in a Toast project I got a CSS warning semi-colon expected css(css-semicolonexpected) when trying to use the Tailwind @apply directive.

A quick Google gave me a stackoverflow result for using it in Vue but the solution worked the same in Toast with one last configuration needed.

Add stylelind dependencies:

1npm install --save-dev stylelint stylelint-config-standard

Create a stylelint config in stylelint.config.js in the root of the project:

1module.exports = {
2  extends: ['stylelint-config-standard'],
3  rules: {
4    'at-rule-no-unknown': [
5      true,
6      {
7        ignoreAtRules: [
8          'tailwind',
9          'apply',
10          'variants',
11          'responsive',
12          'screen',
13        ],
14      },
15    ],
16    'declaration-block-trailing-semicolon': null,
17    'no-descending-specificity': null,
18  },
19}

Install VSCode extensions:

Add the following to a VSCode settings file:

1"css.validate": false,
2"less.validate": false,
3"scss.validate": false,

If there’s not a file already add it with:

1mkdir .vscode
2touch .vscode/settings.json

Note using in Toast

With styling and using stylelint in Toast, rather than use the recommended stylelint.config.js use .stylelintrc and add in the configuration as a JSON object or add it directly to the package.json file.

1{
2  "name": "project-using-stylelint",
3  "scripts": {},
4  "dependencies": {},
5  "devDependencies": {},
6  "stylelint": {
7    "extends": ["stylelint-config-standard"],
8    "rules": {
9      "at-rule-no-unknown": [
10        true,
11        {
12          "ignoreAtRules": [
13            "tailwind",
14            "apply",
15            "variants",
16            "responsive",
17            "screen"
18          ]
19        }
20      ],
21      "declaration-block-trailing-semicolon": null,
22      "no-descending-specificity": null
23    }
24  }
25}

With the module.exports syntax Toast will derp, see the SO question for configuration: How to solve semi-colon expected css(css-semicolonexpected)

Stylelint Configuration for use with Tailwind CSS

Note using in Toast

Useful? Please consider sharing this on Twitter.