如何让VSCode识别SvelteKit中Tailwind CSS的指令与函数？

我正在使用SvelteKit、Tailwind CSS和VSCode。

当我在<style>标签中使用Tailwind的指令和函数时，会出现lint错误：

例如使用@screen时：

Unknown at rule @screencss(unknownAtRules)

但功能实际正常（符合Tailwind文档的表现）。

我还尝试了@media screen(lg)，同样出现lint错误：

Identifier or parenthesis is expected

If you expect this syntax to work, here are some suggestions: 
If you use less/SCSS with `svelte-preprocess`, did you add `lang="scss"`/`lang="less"` to your `style` tag? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`. 
Did you setup a `svelte.config.js`? 
See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.svelte(css-syntax-error)
{ expectedcss(css-lcurlyexpected)
at-rule or selector expectedcss(css-ruleorselectorexpected)

我尝试过相关配置步骤，但没有帮助。我遗漏了什么？

以下是针对这类lint错误的有效修复方式：

1. 让VSCode忽略未知CSS At规则 #

打开VSCode设置（快捷键Ctrl+,），搜索css.lint.unknownAtRules，将其值改为ignore。也可以直接在.vscode/settings.json中添加配置：

{
  "css.lint.unknownAtRules": "ignore",
  "scss.lint.unknownAtRules": "ignore"
}

2. 确认Svelte预处理配置正确 #

检查项目根目录的svelte.config.js，确保已正确配置预处理：

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter()
  }
};

export default config;

同时确保postcss.config.js配置正确：

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. 使用Tailwind标准语法 #

@media screen(lg)不是Tailwind的标准写法，正确用法是：

@screen lg {
  /* 大屏适配样式 */
}

/* 或结合原生媒体查询的写法 */
@media (min-width: theme('screens.lg')) {
  /* 大屏适配样式 */
}

4. 检查VSCode插件状态 #

确保安装了官方Svelte插件，且没有其他CSS lint插件干扰。如果之前有插件冲突，可暂时禁用无关的CSS检查工具，只保留Svelte和Tailwind相关插件。

内容的提问来源于stack exchange，提问作者Valentin Vignal