Stylelint Configuration for use with Tailwind CSS

2 minutes to read
tailwind csscssnotes

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:

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

Create a stylelint config in stylelint.config.js in the root of the 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 VSCode extensions:

Add the following to a VSCode settings file:

"css.validate": false,
"less.validate": false,
"scss.validate": false,

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

mkdir .vscode
touch .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.

{
"name": "project-using-stylelint",
"scripts": {},
"dependencies": {},
"devDependencies": {},
"stylelint": {
"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
}
}
}

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

a cheeky butt

Sign up for the newsletter

Want to keep up to date with what I'm working on?

Important dev related content, directly to your inbox (for free).

I care about the protection of your data. Read my Privacy Policy.