If you using VS Code then you can add support for modern and experimental CSS within Visual Studio Code by installing the following plugin to fix the error while using Tailwind CSS directives.

https://marketplace.visualstudio.com/items?itemName=csstools.postcss

You have to get a code formatter for VSCode to solve it.

I recommend you to download Beautify available on this link.

Quick Solution for both .css and .scss (NOT RECOMMENDED)

1. At the root level of your project, update or create a dir .vscode with a file settings.json:

2. Add the following to .vscode/settings.json:

{
  "css.validate": false
}

Results:

You get rid of these SASS linting errors when using Tailwind-CSS but you disable CSS validation.

Solution for both .css and .scss

1. At the root level of your project, update or create a dir .vscode with a file settings.json:

2. Add the following to .vscode/settings.json:

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

3. Install the vscode-stylelint extension

4. install stylelint-config-standard:

npm i stylelint-config-standard -D

5. create a stylelint.config.js file at the root level and add:

module.exports = {
  extends: ['stylelint-config-recommended'],
  rules: {
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
        ],
      },
    ],
    "declaration-block-trailing-semicolon": null,
    "no-descending-specificity": null,
  },
};

6. restart vsCode

Results:

You get rid of these SASS linting errors when using Tailwind-CSS and keep doing css validation with stylelint.

The other answers are thermonuclear. Even Confucius stopped with a canon...

This is the one that did it for me.

To reproduce: Settings -> search for "invalid tailwind directive", update the value for this rule to "ignore". Voila.

You can tell VS Code's CSS linter to ignore "Unknown At Rules" (like @tailwind). This will leave the rest of your CSS validation intact:

1. VS Code -> Command Palette -> Workspace Settings -> Search for: CSS Unknown At Rules
2. Set to ignore

VS Code can also whitelist specific CSS properties with CSS > Lint: Valid Properties, but it doesn't look like whitelisting specific 'at rules' is supported yet.

One line fix in vscode's settings.json

"scss.lint.unknownAtRules": "ignore"