Next.js项目使用Tailwind CSS v4时遭遇@apply规则警告及未知工具类错误的解决咨询

问题描述 #

我正在Next.js项目中使用Tailwind CSS v4，我的global.css文件内容如下：

@import "tailwindcss";

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

目前遇到两个问题：

• 项目构建时抛出错误：

./src/app/globals.css
Error evaluating Node.js code
Error: Cannot apply unknown utility class: border-border
    [at onInvalidCandidate (C:\Users\poude\Desktop\My 

• VS Code编辑器里提示：

Unknown at rule @applycss(unknownAtRules)

想请教有没有办法解决这些问题？

解决步骤 #

1. 修复“未知工具类”错误（border-border等）

Tailwind CSS v4中，border-border、bg-background这类基于自定义主题变量的工具类，需要先在Tailwind配置文件中定义对应的颜色变量，而且v4的配置结构和v3有差异，得注意配置格式。

首先，确保你的tailwind.config.js（或.ts）里正确定义了这些自定义颜色：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
      },
    },
  },
  plugins: [],
}

同时，要在globals.css中先定义对应的CSS变量，建议放在@layer base之前的全局作用域里：

@import "tailwindcss";

:root {
  --border: 214.3 31.8% 91.4%;
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

这样Tailwind就能识别到border-border这类工具类了——它们对应你定义的CSS变量，Tailwind会自动生成对应的工具类。

2. 修复VS Code中的@apply规则警告

这个警告是因为VS Code默认的CSS lint工具不认识Tailwind的@apply语法，你可以用下面两种方式解决：

• 安装并启用Tailwind CSS IntelliSense扩展：这个扩展专门适配Tailwind的语法，安装后编辑器的警告会自动消失，还能提供Tailwind类名的智能提示，非常实用。
• 手动修改VS Code设置：如果不想装扩展，打开设置（快捷键Ctrl+,），搜索css.lint.unknownAtRules，把它的值改成ignore，就能让lint工具忽略@apply规则的警告了。

额外提醒

Tailwind CSS v4目前还处于测试阶段，可能存在一些兼容性问题，要确保你的Next.js版本和Tailwind v4的要求匹配，比如Next.js建议使用13.4及以上版本配合Tailwind v4使用。

备注：内容来源于stack exchange，提问作者Narayan Poudel