VS Code无法识别Tailwind CSS问题求助（Next.js项目）

一、先补全Tailwind CSS的安装与Next.js项目配置 #

你的终端操作里未安装Tailwind相关依赖，这是导致VS Code无法识别指令的核心原因之一，按以下步骤补全配置：

1. 安装Tailwind CSS及配套依赖

   npm install -D tailwindcss postcss autoprefixer
   

2. 初始化Tailwind配置文件

   npx tailwindcss init -p
   

3. 修改tailwind.config.ts，指定项目中需要应用Tailwind的文件路径：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./app/**/*.{js,ts,jsx,tsx,mdx}",
       "./pages/**/*.{js,ts,jsx,tsx,mdx}",
       "./components/**/*.{js,ts,jsx,tsx,mdx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

4. 确保globals.css中的Tailwind指令结构正确：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   /* 自定义样式示例 */
   .custom-text {
     @apply text-sm;
   }
   

二、配置VS Code识别Tailwind指令 #

1. 在VS Code扩展市场安装Tailwind CSS IntelliSense插件
2. 打开VS Code设置（快捷键Ctrl+,/Cmd+,），搜索CSS > Lint: Unknown At Rules，将值设为ignore；也可直接在settings.json中添加：

   "css.lint.unknownAtRules": "ignore",
   "scss.lint.unknownAtRules": "ignore",
   "tailwindCSS.experimental.classRegex": [
     ["@apply\\s+(.*)", "\"([^\"]*)\""]
   ]
   

3. 按下Ctrl+Shift+P/Cmd+Shift+P选择"Reload Window"，重启VS Code让配置生效

完成以上操作后，VS Code即可正确识别@tailwind和@apply指令，不再弹出未知规则提示。

内容的提问来源于stack exchange，提问作者Fabjon Fab