How to add a @tailwind CSS rule to css checker

Tailwind adds @tailwind css at rule which is flagged as unknown. How can I avoid this error?

eg styles.css

@tailwind preflight;

@tailwind utilities;

hasusuf

This is the at-rule-no-unknown rule provided by vscode's built-in list.

In order to get rid of it you need to do the following:

1. Install stylelint extension code --install-extension shinnn.stylelint

2. Install stylelint recommended config npm install stylelint-config-recommended --save-dev

3. Add these two lines in your vscode USER SETTINGS

"css.validate": false, // Disable css built-in lint
"stylelint.enable": true, // Enable sytlelint

4. Paste these lines into a file called .stylelintrc in your project's root directory, create it if it does not exist. More information about stylelint's configuration follow this link: https://stylelint.io/user-guide/

{
  "extends": "stylelint-config-recommended",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends",
        "tailwind"
      ]
    }],
    "block-no-empty": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}

Ace.C

My recommendation is to install postCSS language support and then rename tailwind.css to tailwind.pcss then change the references in your package.json scripts (or whatever build scripts you are using for tailwind) to tailwind.pcss from tailwind.css and everything should work fine.

@apply rule is compatible with postCSS: https://github.com/tailwindcss/tailwindcss/issues/325

After many tests: POSTCSS and STYLUS syntax highlighter, removes warnings but CSS Intellisence is incomplete, does not show the first-utitilies classes Tailwind

I installed 'language-stylus' plugin, in VSCode

Settings> User setting:

"files.associations": {
   "* .css": "stylus"
 },

See you later!

CSS Intellisence is incomplete

SCSS

If you are using SASS with Tailwind, you will still see errors in your .scss files using these earlier answers to this question.

To properly lint SASS, you can add to your VS Code settings:

"scss.validate": false,

Follow the instructions by @hasusuf but turn off the default VS Code validator:

Add these 3 settings:

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

来源：https://stackoverflow.com/questions/47607602/how-to-add-a-tailwind-css-rule-to-css-checker

标签

visual-studio-code

tailwind-css