Tailwind CSS报错：自定义工具类text-responsive-sm无法被组件层识别

我的代码： #

@layer components {
  h1,
  h2,
  h3,
  h4,
  h5,
  h5,
  h6 {
    @apply  font-medium text-heading text-responsive-sm ;
  }
}
@layer utilities{
  .text-responsive-sm {
    font-size: 0.75rem; /* text-xs */
  }
}

报错信息： #

[plugin:@tailwindcss/vite:generate:serve] 无法应用未知工具类：text-responsive-sm
C:/Users/shahzaib/Downloads/GitHub Huzaifa/claimo/src/app.css

我已经在@layer utilities里定义了text-responsive-sm工具类，但在@layer components中调用时被提示未知工具类，该怎么解决？

问题出在Tailwind对@layer的处理顺序上：components层优先级高于utilities层，会先被解析。当解析components里的@apply时，utilities里的自定义类还未完成注册，因此触发报错。

解决方法：

• 调整@layer的顺序，将@layer utilities放在@layer components之前，让Tailwind先解析并注册工具类，再处理组件层的样式：

修改后的代码：

@layer utilities{
  .text-responsive-sm {
    font-size: 0.75rem; /* text-xs */
  }
}

@layer components {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-medium text-heading text-responsive-sm;
  }
}

额外检查项：

• 确认Tailwind配置文件（tailwind.config.js）的content字段包含该CSS文件所在目录，避免Tailwind将自定义类误判为无用代码剔除。

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