@ rules showing as warning

[lexman1958]

What version of VS Code are you using?

Version: 1.81.0 (user setup)
Commit: 6445d93c81ebe42c4cbd7a60712e0b17d9463e97
Date: 2023-08-02T12:37:13.485Z
Electron: 22.3.18
ElectronBuildId: 22689846
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Windows_NT x64 10.0.19045

What version of Tailwind CSS IntelliSense are you using?

v0.9.11

What version of Tailwind CSS are you using?

V 3.3.3

What package manager are you using?

none

What operating system are you using?

Windows 10

Tailwind config

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./burger/*.html", "./burger/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        clifford: "#da373d",
      },
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/aspect-ratio"),
  ],
};

VS Code settings

{
  "editor.wordWrap": "on",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.colorDecorators": true,
  "editor.colorDecoratorsActivatedOn": "hover",
  "workbench.iconTheme": "vscode-great-icons",
  "workbench.colorTheme": "Monokai Dark Soda",
  "html-css-class-completion.CSSLanguages": [
    "php",
    "css",
    "sass",
    "scss",
    "vue"
  ],
  "html-css-class-completion.enableEmmetSupport": true,
  "html-css-class-completion.HTMLLanguages": [
    "html",
    "vue",
    "razor",
    "blade",
    "handlebars",
    "twig",
    "django-html",
    "php",
    "markdown",
    "erb",
    "ejs",
    "svelte"
  ],
  "html-css-class-completion.JavaScriptLanguages": [
    "php",
    "javascript",
    "javascriptreact",
    "typescriptreact"
  ],
  "workbench.editor.enablePreview": false,
  "editor.minimap.enabled": false,
  "auto-close-tag.activationOnLanguage": [
    "twig",
    "xml",
    "php",
    "blade",
    "ejs",
    "jinja",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "plaintext",
    "markdown",
    "vue",
    "liquid",
    "erb",
    "lang-cfml",
    "cfml",
    "HTML (EEx)",
    "HTML (Eex)",
    "plist"
  ],
  "auto-close-tag.insertSpaceBeforeSelfClosingTag": true,
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.useInlineCompletions": true,
  "emmet.triggerExpansionOnTab": true,
  "editor.formatOnSave": true,
  "auto-rename-tag.activationOnLanguage": ["*"],
  "open-in-browser.default": "chrome",
  "highlight-matching-tag.highlightFromContent": true,
  "highlight-matching-tag.highlightSelfClosing": true,
  "html.format.wrapLineLength": 120,
  "prettier.bracketSameLine": true,
  "prettier.printWidth": 80,
  "prettier.bracketSpacing": false,
  "prettier.vueIndentScriptAndStyle": true,
  "css.enabledLanguages": ["php", "twig", "astro", "html"],
  "liveSassCompile.settings.useNewCompiler": true,
  "path-intellisense.extensionOnImport": true,
  "path-intellisense.autoTriggerNextSuggestion": true,
  "path-autocomplete.extensionOnImport": true,
  "bookmarks.label.suggestion": "suggestWhenSelected",
  "bookmarks.navigateThroughAllFiles": false,
  "bookmarks.useWorkaroundForFormatters": true,
  "workbench.startupEditor": "none",
  "php.executables": {
    "v8.1.17": "c:/xampp/php"
  },
  "php.completion.autoimport-docblock": "auto-import",
  "php.completion.parameters": "parameters",
  "php.executablePath": "c:/xampp/php",
  "php.inlayHints.types.variable": true,
  "php.problems.scope": "user",
  "php.problems.exclude": {
    "/": [406, 437, 6406],
    // "/": [406, 6406],
    "vendor/": true
  },
  "php.problems.excludeGitIgnore": true,
  "php.version": "8.1.17",
  "php.format.rules.alignConsecutiveAssignments": true,
  "php.format.rules.arrayInitializersAlignKeyValuePairs": true,
  "php.format.rules.arrayInitializersNewLineAfterLastElement": true,
  "php.format.rules.arrayInitializersNewLineBeforeFirstElement": true,
  "php.format.rules.callParametersNewLineAfterLeftParen": true,
  "php.format.rules.declParametersNewLineAfterLeftParen": true,
  "php.format.rules.openBraceOnNewLineForFunctions": true,
  "php.format.rules.openBraceOnNewLineForLambdas": true,
  "php.format.rules.spaceAroundConcatenation": true,
  "php.format.rules.spaceBeforeColonInControlStatements": true,
  "php-docblocker.alignParams": true,
  "php-docblocker.alignReturn": true,
  "php-docblocker.useShortNames": true,
  "files.associations": {
    "*.embeddedhtml": "html",
    ".env*": "dotenv"
  },
  "editor.tokenColorCustomizations": {
    "textMateRules": []
  },
  "phpserver.browser": "google-chrome",
  "template-string-converter.autoRemoveTemplateString": true,
  "tailwindCSS.emmetCompletions": true,
  "[php]": {
    "editor.defaultFormatter": "DEVSENSE.phptools-vscode"
  },
  "emmet.excludeLanguages": ["markdown"],
  "emmet.includeLanguages": {
    "php": "html",
    "vue": "html",
    "javascript": "Javascriptreact"
  },
  "php-cs-fixer.autoFixBySemicolon": true,
  "php-cs-fixer.formatHtml": true,
  "css.format.enable": false,
  "php.validate.enable": true,
  "rapidapi.terminalLink.enabled": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "colorize.include": [
    "**/*.php",
    "**/*.css",
    "**/*.scss",
    "**/*.sass",
    "**/*.less",
    "**/*.styl",
    "**/*.html"
  ],
  "colorize.languages": [
    "php",
    "css",
    "sass",
    "scss",
    "less",
    "postcss",
    "sss",
    "stylus",
    "xml",
    "svg",
    "html"
  ],
  "phpGettersSetters.generatePHPDoc": false,
  "editor.inlineSuggest.enabled": true,
  "[twig]": {
    "editor.defaultFormatter": "junstyle.twig-language"
  },
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": false,
    "scminput": false,
    "php": true
  },
  "terminal.integrated.sendKeybindingsToShell": true,
  "dotenv.enableAutocloaking": false,
  "php.format.rules.ifStatementNewLineAfterLeftParen": true,
  "php.format.rules.openBraceOnNewLineForBlocks": false,
  "window.commandCenter": false,
  "php.inlayHints.parameters.suppressNameMatchingValue": true,
  "cssvar.extensions": [
    "css",
    "scss",
    "sass",
    "less",
    "postcss",
    "vue",
    "svelte",
    "astro",
    "ts",
    "tsx",
    "js",
    "jsx",
    "tailwindcss",
    "astro",
    "vue",
    "typescript",
    "javascript"
  ],


  "inline-css-color.enablePhpStyle": true,
  "inline-css-color.enableHtmlCommentStyle": true
}

Reproduction URL

Describe your issue

The @ rules show are showing warnings. Although they are stopping the execution, the number of warning are misleading and debugging the real problem have become a problem.

[bradlc]

Hey @lexman1958. These warnings come from VS Code's built-in CSS validation. There's two things you can do to avoid them:

• Use the Tailwind CSS language mode instead of CSS (recommended). You can set this as the default for .css files using the files.associations setting:

  "files.associations": {
    "*.css": "tailwindcss"
  }

• Alternatively, disable the CSS validation using the css.validate setting:

  "css.validate": false

I hope that helps!

[lexman1958]

@bradlc i used the first suggestion and all the formatting disappeared. See screencap:

I used the second option and it appears to work but i am not sure what will be the consequences on other css files. Will test it out.