Next.js 13+Tailwind CSS样式报错，求text-default-text类问题解决办法

1. 在Tailwind配置文件中定义自定义颜色 #

打开项目根目录下的tailwind.config.js（若不存在则新建），在theme.extend.colors中添加你的自定义颜色值：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 确保覆盖所有使用Tailwind的文件路径
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        'default-text': '#替换为你的目标颜色值', // 示例：#333333
        'blue-accent': '#替换为你的目标颜色值', // 示例：#2563eb
        'blue-accent-hover': '#替换为你的目标颜色值', // 示例：#1d4ed8
        'nav': '#替换为你的目标颜色值', // 示例：#ffffff
      },
    },
  },
  plugins: [],
}

2. 重启Next.js开发服务器 #

修改Tailwind配置后必须重启开发服务器，否则新配置不会生效。在终端终止当前服务，重新运行npm run dev或yarn dev。

3. 验证样式生效情况 #

重启服务后，检查globals.css中的.icon和.btn类是否正常应用样式，错误提示应会消失。

备选方案（不推荐） #

如果需要直接定义全局工具类，可在@layer utilities中声明：

@layer utilities {
  .text-default-text {
    color: #你的颜色值;
  }
  .bg-blue-accent {
    background-color: #你的颜色值;
  }
  /* 按需添加其他自定义工具类 */
}

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