Tailwind CSS样式在SvelteKit本地项目不生效，出现@tailwind未知规则错误

1. 补全PostCSS配置 #

检查项目根目录是否存在postcss.config.js，没有则新建，写入以下内容：

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

2. 确认全局样式文件与导入 #

• 在src/app.css中添加Tailwind核心指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

• 确保在src/routes/+layout.svelte中导入该样式文件：

<script>
  import '../app.css';
</script>

<slot />

3. 优化Svelte配置（可选） #

当前svelte.config.js可补充PostCSS显式配置（默认已支持，但部分场景需手动指定）：

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

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

export default config;

4. 消除编辑器规则提示 #

在项目根目录的.vscode/settings.json（无则新建）中添加配置：

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

也可安装Tailwind CSS IntelliSense插件，自动识别规则并提供语法支持。

完成以上操作后重启开发服务器（npm run dev），样式即可正常生效。

内容的提问来源于stack exchange，提问作者Helmar Bachle